您可以在HTML的菜單欄上找到很多教程，但是對于這種特定的（雖然是IMHO通用）案例，我沒有找到任何合適的解決方案：# THE MENU ITEMS SHOULD BE JUSTIFIED JUST AS PLAIN TEXT WOULD BE ## ^ ^ #純文本菜單項數量不一，頁面布局也很流暢。第一個菜單項應左對齊，最后一個菜單項應右對齊。其余項目應在菜單欄上進行最佳分配。這個數字是變化的，因此沒有機會預先計算出最佳寬度。請注意，TABLE在這里也無法正常工作：如果將所有TD居中，則第一個和最后一個項目對齊不正確。如果左對齊，右對齊第一個。最后一項，間隔將不是最佳的。沒有明顯的方法可以通過使用HTML和CSS干凈地實現這一點，這很奇怪嗎？
3 回答
呼喚遠方
TA貢獻1856條經驗 獲得超11個贊
現代方法-Flexboxes！
現在CSS3 flexbox具有更好的瀏覽器支持，我們當中的一些人終于可以開始使用它們了。只需添加其他供應商前綴即可獲得更多瀏覽器覆蓋。
在這種情況下，您只需將父元素設置display為flex，然后將該justify-content屬性更改為space-between或space-around，以便在子級flexbox項之間或周圍添加空間。
使用justify-content: space-between - （此處為示例）：
ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu {
display: flex;
justify-content: space-between;
}
<ul class="menu">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three Longer</li>
<li>Item Four</li>
</ul>
使用justify-content: space-around - （此處為示例）：
ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu {
display: flex;
justify-content: space-around;
}
<ul class="menu">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three Longer</li>
<li>Item Four</li>
</ul>
- 3 回答
- 0 關注
- 508 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消