使列表自動伸展到容器寬度

Question

我有一個這樣的名單：

.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>

這是一個菜單。如果它溢出，我希望它斷行，因此我將顯示設置爲<li> inline-block。這是行得通的，但我希望每一條線都能伸展到它的容器。我怎樣才能做到這一點？

Answer 1

使用flexbox像這可能是一個選項

規則改變：

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

而且隨着white-space: nowrap;的錨，其文本將不會斷線和text-align: center居中文本

樣本片段

.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>