合理的導航欄

水平對齊導航（選單）欄有一些應該合理的專案。第一個（左）專案在容器內沒有左邊距，最後一個（右）專案在容器內沒有右邊距。專案之間的距離相等，與單個專案寬度無關。

HTML

<nav>
    <ul>
        <li>abc</li>
        <li>abcdefghijkl</li>
        <li>abcdef</li>
    </ul>
</nav>

CSS

nav {
    width: 100%;
    line-height: 1.4em;
}
ul {
    list-style: none;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: justify;
    margin-bottom: -1.4em;
}
ul:after {
    content: "";
    display: inline-block;
    width: 100%;
}
li {
    display: inline-block;
}

筆記

• 選擇 nav，ul 和 li 標籤是因為它們的“導航列表（選單）專案”的語義含義。當然也可以使用其他標籤。
• :after 偽元素在 ul 中產生額外的線，因此該塊的額外空高，推動其他內容。這是由負的 margin-bottom 解決的，它必須具有與 line-height 相同的幅度（但是為負）。
• 如果頁面變得太窄而無法容納所有專案，則專案將分解為新行（從右側開始）並在此行上對齊。選單的總高度將根據需要增長。