Make Liste auto strecken, um Behälterbreite

Question

Ich habe eine Liste wie folgt aus:

.header-top { 
 
    margin-bottom: 0.625em; /* 10/16 */ 
 
} 
 
.nav{ 
 
    padding: 0; 
 
} 
 
.top-nav ul li{ 
 
    display: inline-block; 
 
} 
 
.top-nav ul li div{ 
 
    background-color: #f4f4f4; 
 
    padding: 1em 0; 
 
    margin: 1px; 
 
    -webkit-box-shadow: 0.0625em 0.0625em 0.0625em #000000; /* 1/16 */ /* 1/16 */ /* 1/16 */ 
 
    -moz-box-shadow: 0.0625em 0.0625em 0.0625em #000000; /* 1/16 */ /* 1/16 */ /* 1/16 */ 
 
    box-shadow: 0.0625em 0.0625em 0.0625em #000000; /* 1/16 */ /* 1/16 */ /* 1/16 */ 
 
} 
 
.top-nav ul{ 
 
    display: table; 
 
    width: 100%; 
 
    padding: 0; 
 

 
} 
 
.top-nav ul li a{ 
 
\t display:block; 
 
\t text-decoration:none; 
 
\t margin: 0 0.3em; 
 
\t color:#363636; 
 
\t font-family: Arial; 
 
    text-transform: uppercase; 
 
}

<div class="col-md-9"> 
 
    <div class="header-top "> 
 
     <div class="nav"> 
 
      <div class="top-nav" id="nav1"> 
 
      <ul> 
 
       <li> 
 
       <div><a href="#">About</a></div> 
 
       </li> 
 
       <li> 
 
       <div><a href="#">For Company</a></div> 
 
       </li> 
 
       <li> 
 
       <div><a href="#">For Enterns</a></div> 
 
       </li> 
 
       <li> 
 
       <div><a href="#">For Partner</a></div> 
 
       </li> 
 
       <li> 
 
       <div><a href="#">For Sales</a></div></li> 
 
       <li> 
 
       <div><a href="#">Network</a></div> 
 
       </li> 
 
       <li> 
 
       <div><a href="#">Club</a></div> 
 
       </li> 
 
       <li> 
 
       <div><a href="#">Case study</a></div> 
 
       </li> 
 
       <li> 
 
       <div><a href="#">Public Service</a></div> 
 
       </li> 
 
       <li> 
 
       <div><a href="#">Donation</a></div> 
 
       </li> 
 
       <li> 
 
       <div><a href="#">Brand</a></div> 
 
       </li> 
 
       <li> 
 
       <div><a href="#">LIBRARY</a></div> 
 
       </li> 
 
       <li> 
 
       <div><a href="#">BOOKS</a></div> 
 
       </li> 
 
       <li> 
 
       <div><a href="#">OTHERS</a></div> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
      <div class="clearfix"></div> 
 
     </div> 
 
     </div> 
 
</div>

Es ist ein Menü. Ich möchte, dass es die Zeile unterbricht, wenn es überläuft, also setze ich die Anzeige auf <li> Inline-Block. Es funktioniert, aber ich möchte, dass sich jede Zeile mit ihrem Container ausdehnt. Wie kann ich das machen?

Answer 1

Mit flexbox wie dies könnte eine Option

Regel sein geändert:

.top-nav ul { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
    padding: 0; 
    list-style-type: none; 
} 
.top-nav ul li { 
    flex: 1; 
} 

Und mit white-space: nowrap; auf dem Anker, dessen Text nicht Zeilenumbruch und text-align: center zum Zentrum den Text

Beispielschnipsel

.header-top { 
 
    margin-bottom: 0.625em; /* 10/16 */ 
 
} 
 
.nav{ 
 
    padding: 0; 
 
} 
 
.top-nav ul { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 
.top-nav ul li { 
 
    flex: 1; 
 
} 
 
.top-nav ul li div{ 
 
    background-color: #f4f4f4; 
 
    padding: 1em 0; 
 
    margin: 1px; 
 
    -webkit-box-shadow: 0.0625em 0.0625em 0.0625em #000000; /* 1/16 */ /* 1/16 */ /* 1/16 */ 
 
    -moz-box-shadow: 0.0625em 0.0625em 0.0625em #000000; /* 1/16 */ /* 1/16 */ /* 1/16 */ 
 
    box-shadow: 0.0625em 0.0625em 0.0625em #000000; /* 1/16 */ /* 1/16 */ /* 1/16 */ 
 
} 
 
.top-nav ul li a{ 
 
\t display:block; 
 
\t text-decoration:none; 
 
\t margin: 0 0.3em; 
 
\t color:#363636; 
 
\t font-family: Arial; 
 
    text-transform: uppercase; 
 
    white-space: nowrap; 
 
    text-align: center; 
 
}

<div class="col-md-9"> 
 
    <div class="header-top "> 
 
     <div class="nav"> 
 
      <div class="top-nav" id="nav1"> 
 
      <ul> 
 
       <li> 
 
       <div><a href="#">About</a></div> 
 
       </li> 
 
       <li> 
 
       <div><a href="#">For Company</a></div> 
 
       </li> 
 
       <li> 
 
       <div><a href="#">For Enterns</a></div> 
 
       </li> 
 
       <li> 
 
       <div><a href="#">For Partner</a></div> 
 
       </li> 
 
       <li> 
 
       <div><a href="#">For Sales</a></div></li> 
 
       <li> 
 
       <div><a href="#">Network</a></div> 
 
       </li> 
 
       <li> 
 
       <div><a href="#">Club</a></div> 
 
       </li> 
 
       <li> 
 
       <div><a href="#">Case study</a></div> 
 
       </li> 
 
       <li> 
 
       <div><a href="#">Public Service</a></div> 
 
       </li> 
 
       <li> 
 
       <div><a href="#">Donation</a></div> 
 
       </li> 
 
       <li> 
 
       <div><a href="#">Brand</a></div> 
 
       </li> 
 
       <li> 
 
       <div><a href="#">LIBRARY</a></div> 
 
       </li> 
 
       <li> 
 
       <div><a href="#">BOOKS</a></div> 
 
       </li> 
 
       <li> 
 
       <div><a href="#">OTHERS</a></div> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
      <div class="clearfix"></div> 
 
     </div> 
 
     </div> 
 
</div>