CSS
インラインブロックレイアウト

調整済みのナビゲーションバー

水平に配置されたナビゲーション（メニュー）バーには、正当化されるべきいくつかの項目があります。最初の（左）アイテムはコンテナ内に左マージンを持たず、最後（右）アイテムはコンテナ内に右マージンを持たない。アイテム間の距離は、アイテムの幅ごとに独立しています。

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によって解決されますが、 margin-bottomはline-heightと同じ大きさでなければならない（ただし負の値）。
• ページが狭すぎてすべてのアイテムが収まりきらない場合、アイテムは新しいライン（右から始まります）に改行され、このラインで正当化されます。メニューの高さは必要に応じて大きくなります。