您可以在HTML的菜單欄上找到很多教程，但是對(duì)于這種特定的（雖然是IMHO通用）案例，我沒有找到任何合適的解決方案：# THE MENU ITEMS SHOULD BE JUSTIFIED JUST AS PLAIN TEXT WOULD BE ## ^ ^ #純文本菜單項(xiàng)數(shù)量不一，頁(yè)面布局也很流暢。第一個(gè)菜單項(xiàng)應(yīng)左對(duì)齊，最后一個(gè)菜單項(xiàng)應(yīng)右對(duì)齊。其余項(xiàng)目應(yīng)在菜單欄上進(jìn)行最佳分配。這個(gè)數(shù)字是變化的，因此沒有機(jī)會(huì)預(yù)先計(jì)算出最佳寬度。請(qǐng)注意，TABLE在這里也無(wú)法正常工作：如果將所有TD居中，則第一個(gè)和最后一個(gè)項(xiàng)目對(duì)齊不正確。如果左對(duì)齊，右對(duì)齊第一個(gè)。最后一項(xiàng)，間隔將不是最佳的。沒有明顯的方法可以通過(guò)使用HTML和CSS干凈地實(shí)現(xiàn)這一點(diǎn)，這很奇怪嗎？
3 回答
呼喚遠(yuǎn)方
TA貢獻(xiàn)1856條經(jīng)驗(yàn) 獲得超11個(gè)贊
現(xiàn)代方法-Flexboxes！
現(xiàn)在CSS3 flexbox具有更好的瀏覽器支持，我們當(dāng)中的一些人終于可以開始使用它們了。只需添加其他供應(yīng)商前綴即可獲得更多瀏覽器覆蓋。
在這種情況下，您只需將父元素設(shè)置display為flex，然后將該justify-content屬性更改為space-between或space-around，以便在子級(jí)flexbox項(xiàng)之間或周圍添加空間。
使用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>
添加回答
舉報(bào)
0/150
提交
取消