中心通過CSS對齊頂層菜單類別

我需要居中對齊我的菜單類別，以便菜單類別應占用1200px的寬度，並且應該在菜單中的類別項目之間存在空白（即，邊距 - 右側）菜單和最後一個項目應該坐在屏幕右側的更多角落（即margin-right：0）。請在下面找到相同的示例代碼。中心通過CSS對齊頂層菜單類別

https://jsfiddle.net/es0o324t/1/

HTML：

<div class="navigationbarcollectioncomponent"> 
    <div id="nav_main"> 
     <ul> 
      <li class="La parent"> 
       <a href="">Clothing</a> 
      </li> 
      <li class="La parent"> 
       <a href="">Denim</a> 
      </li> 
      <li class="La parent"> 
       <a href="">Accessories</a> 
      <li class="La parent"> 
       <a href="">Online Exclusives</a> 
      </li> 
      <li class="La parent"> 
       <a href="">Sale</a> 
      </li> 
      <li class="La parent"> 
       <a href="">Hot offers</a> 
      </li> 
     </ul> 
    </div> 
</div>

CSS：

body { 
margin:0; 
padding:0; 
} 

ul{ 
margin-left:0; 
} 

ul,li{ 
list-style: none; 
padding:0; 
} 

.navigationbarcollectioncomponent { 
width: 1200px; 
margin: 0 auto; 
} 

#nav_main li.La{ 
float: left; 
} 

#nav_main li.La > a { 
color: #373737; 
display: inline-block; 
font-family: "Lato-Regular"; 
font-size: 16px; 
line-height: 36px; 
margin: 0; 
padding: 0px 8px; 
text-transform: uppercase; 
}

我已經通過JavaScript和通過讀取菜單中的每個類別的寬度，然後計算所述間隙B來實現這/ w基於類別計數的類別。

但問題是我只需要通過不使用JavaScript的CSS來做到這一點。 bcoz通過JS計算需要一些時間。

此外，類別數量的計數是動態的。因此，我不能硬編碼每個類別（即li標籤）的保證金右值。

請讓我知道是否有相同的解決方案。

預期結果快照的PFA。

第一類應當最左對齊在1200像素寬和最後一類應該對齊到右側，是黑/白的第一和最後的類別的類別應該是中心具有均勻間距

來源

2017-01-25 Manju

正如你用CSS3標記了這個問題，爲什麼不使用flex？

將您的容器ul設置爲顯示flex，並將justify-content設置爲space-between。

ul { 
    width: 100%; padding: 8px; 
    display: flex; 
    justify-content: space-between; 
}

你的小提琴：https://jsfiddle.net/abhitalks/es0o324t/2/

來源

2017-01-25 05:59:31 Abhitalks

感謝隊友。它按預期工作 – Manju

爲了中心對準你的導航菜單，請添加此CSS。

#nav_main{ 
    margin: 0 auto; 
    display: table; 
}

來源

2017-01-25 05:31:29 oxy

感謝您的答覆，它不是關於中心對準菜單，它大約在菜單的類別之間具有均勻間距。如查詢中附帶的快照 – Manju

檢查此琴：jsfiddle.net/shiyaspathiyassery/6jqy6702/1/

您已經添加float: left;請刪除。

來源

2017-01-25 05:46:01

感謝您的回覆隊友，它不是關於中心對齊菜單，它關於在菜單中的類別之間有間隔。如查詢中附加的快照 – Manju

這裏的東西足夠接近。運行代碼片段查看結果：

儘管最左邊和最右邊的菜單分別不會粘在邊上，因爲<li> text-align被設置爲居中以便在菜單之間實現均勻間隔。

body { 
 
margin:0; 
 
padding:0; 
 
} 
 

 
ul{ 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: box; 
 
    width: 100%; 
 
} 
 

 
ul,li{ 
 
list-style: none; 
 
padding:0; 
 
} 
 

 
.navigationbarcollectioncomponent { 
 
    display: inline-block; 
 
    width: 1200px; 
 
    margin: 0 auto; 
 
} 
 

 
#nav-main{ 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 

 
#nav_main li.La{ 
 
    text-align: center; 
 
    -webkit-box-flex: 1; 
 
    -moz-box-flex: 1; 
 
    box-flex: 1; 
 
} 
 

 
#nav_main li.La > a { 
 
color: #373737; 
 
display: inline-block; 
 
font-family: "Lato-Regular"; 
 
font-size: 16px; 
 
line-height: 36px; 
 
margin: 0; 
 
padding: 0px 8px; 
 
text-transform: uppercase; 
 
}

<div class="navigationbarcollectioncomponent"> 
 
    <div id="nav_main"> 
 
     <ul> 
 
      <li class="La parent"> 
 
       <a href="">Clothing</a> 
 
      </li> 
 
      <li class="La parent"> 
 
       <a href="">Denim</a> 
 
      </li> 
 
      <li class="La parent"> 
 
       <a href="">Accessories</a> 
 
      <li class="La parent"> 
 
       <a href="">Online Exclusives</a> 
 
      </li> 
 
      <li class="La parent"> 
 
       <a href="">Sale</a> 
 
      </li> 
 
      <li class="La parent"> 
 
       <a href="">Hot offers</a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div>

來源

2017-01-25 06:02:45 ITWitch

table-layout: fixed可以用來實現你在找什麼。

在table-layout: fixed水平佈局只取決於表格的寬度和列的寬度，而不考慮單元格的內容。所以你的表格寬度將被平均分爲每列。

添加/修改這些的CSS ul性質和#nav_main li.La

ul{ 
    margin-left:0; 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
    text-align: center; 
} 

#nav_main li.La{ 
    display:table-cell; 
}

https://jsfiddle.net/f03mqxd7/

來源

2017-01-25 06:18:22 Uday

中心通過CSS對齊頂層菜單類別

回答

相關問題