サーチ…


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

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

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;
}

ノート

  • navulliタグは、意味(ナビゲーション)項目のリストとして選択されました。もちろん、他のタグを使用することもできます。
  • :after擬似要素は、 ul内に余分な '行'をもたらし、したがってこのブロックの余分な、空の高さをもたらし、他のコンテンツを押し下げます。これは、負のmargin-bottomによって解決されますが、 margin-bottomline-heightと同じ大きさでなければならない(ただし負の値)。
  • ページが狭すぎてすべてのアイテムが収まりきらない場合、アイテムは新しいライン(右から始まります)に改行され、このラインで正当化されます。メニューの高さは必要に応じて大きくなります。


Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow