Comment contenir toutes LI largeur intérieure ul sans envelopper

Je veux créer une structure de fil d'Ariane qui est comme ceci:Comment contenir toutes LI largeur intérieure ul sans envelopper

nav1> nav2> nav3 etc.

Ainsi est un ul contenu dans div d'avoir chaque nav1, nav2 et nav3 en tant que li. Tout comme ci-dessous:

ul.nice-menu, ul.nice-menu ul { 
 
\t list-style: none; 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t border-top: 1px solid #ccc; 
 
\t /*position: relative;*/ 
 
    white-space: nowrap; 
 
    overflow:hidden; 
 
} 
 

 
#zone-menu ul > li { 
 
\t /*width: 20%;*/ 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
\t padding: 0; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
} 
 

 
ul.nice-menu li { 
 
\t margin: 0; 
 
\t padding-left: 0; 
 
\t background-image: none; 
 
} 
 

 
ul.nice-menu-down li { 
 
\t border-top: 1px solid #ccc; 
 
} 
 

 
ul.nice-menu li { 
 
\t border: 1px solid #ccc; 
 
\t border-top: 0; 
 
\t float: left; 
 
\t background-color: #eee; 
 
\t /*position: relative;*/ 
 
}

<div id="zone-menu"> 
 
\t <ul class="nice-menu"> 
 
\t \t <li><a href="/">Another Test</a></li> 
 
\t \t <li><a href="/">Test</a></li> 
 
\t \t <li><a href="/">Another Test2</a></li> 
 
\t \t <li><a href="/">Menu Item 2</a></li> 
 
\t \t <li><a href="/">Test3 is a very long menu item. It should not be wrapped. Instead should truncate with ellipses</a></li> 
 
\t </ul> 
 
</div>

Je dois éviter l'emballage et de montrer les ellipses que dans le dernier élément de fil d'Ariane. Toute aide serait appréciée.

Source

2017-07-11 Vibhor Singhal

Vous ne pouvez pas avoir ce sans spécifier une largeur - au moins pas avec cette approche. Vous devriez plutôt aller à la flexbox. – CBroe

Je peux aller avec flexbox. Pourriez-vous donner un exemple similaire –

Je pense que cela devrait résoudre votre problème. J'ai pris l'approche flexbox CBroe suggéré. J'ai mis une largeur maximale sur l'étiquette de sorte que vous devez ajuster cela pour répondre à vos besoins lorsque vous implémentez votre solution finale. Voici le lien vers un exemple pen pour résoudre votre problème. Bonne chance!

* { 
 
    box-sizing: border-box; 
 
    font-family: helvetica, sans-serif; 
 
    font-size: 16px; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
    color: #36c0e8; 
 
} 
 

 
a:hover { 
 
    color: #2ea3c5; 
 
} 
 

 
ul.nice-menu { 
 
    list-style: none; 
 
    padding:0; 
 
    margin:0; 
 
    display: flex; 
 
} 
 

 
ul.nice-menu li { 
 
    padding:0; 
 
    margin:0; 
 
} 
 

 
ul.nice-menu li a { 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    max-width: 150px; 
 
    overflow-x: hidden; 
 
    padding:20px 25px 20px 15px; 
 
    position: relative; 
 
} 
 

 
ul.nice-menu li a::after { 
 
    content: " "; 
 
    position: absolute; 
 
    top:40%; 
 
    right: 2px; 
 
    width: 10px; 
 
    height: 10px; 
 
    transform: translateY(-50%); 
 
    transform: rotate(-45deg); 
 
    background-color: transparent; 
 
    border-bottom: solid gray 2px; 
 
    border-right: solid gray 2px; 
 
} 
 

 
ul.nice-menu li:last-child a::after { 
 
    content: none; 
 
}

<ul class="nice-menu"> 
 
     <li><a href="/">Another Test</a></li> 
 
     <li><a href="/">Test</a></li> 
 
     <li><a href="/">Another Test2</a></li> 
 
     <li><a href="/">Menu Item 2</a></li> 
 
     <li><a href="/">Test3 is a very long menu item. It should not be wrapped. Instead should truncate with ellipses</a></li> 
 
    </ul>

Source

2017-07-14 02:51:19

Comment contenir toutes LI largeur intérieure ul sans envelopper

Répondre

Questions connexes