web-dev-qa-db-ja.com

水平リストを正当化するにはどうすればよいですか？

次のような水平ナビゲーションバーがあります。

<ul id = "Navigation">
    <li><a href = "About.html">About</a></li>
    <li><a href = "Contact.html">Contact</a></li>
    <!-- ... -->
</ul>

CSSを使用して箇条書きを削除し、水平にします。

#Navigation li
{
    list-style-type: none;
    display: inline;
}

各リンクがulのスペース全体を埋めるように均等に広がるようにテキストを正当化しようとしています。 text: justifyをliセレクターとulセレクターの両方に追加しようとしましたが、それらはまだ左揃えです。

#Navigation
{
    text-align: justify;
}

#Navigation li
{
    list-style-type: none;
    display: inline;
    text-align: justify;
}

text-align: rightを使用すると、期待どおりに動作するため、これは奇妙です。

リンクを均等に広げるにはどうすればよいですか？

htmlcsshtml-listsjustify
42
Maxpm

最新のアプローチ- CSS3フレックスボックス

CSS3 flexboxes ができたので、これを機能させるためにトリックや回避策に頼る必要はなくなりました。幸いなことに、 ブラウザサポートは長い道のりを歩んできました で、私たちのほとんどはフレックスボックスの使用を開始できます。

親要素のdisplayをflexに設定してから、 _justify-content_ property を _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>About</li>
    <li>Contact</li>
    <li>Contact Longer Link</li>
    <li>Contact</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>About</li>
    <li>Contact</li>
    <li>Contact Longer Link</li>
    <li>Contact</li>
</ul>_
31
Josh Crozier

この作業を行うには、「トリック」を使用する必要があります。

参照：http://jsfiddle.net/2kRJv/

HTML：

<ul id="Navigation">
    <li><a href="About.html">About</a></li>
    <li><a href="Contact.html">Contact</a></li>
    <!-- ... -->
    <li class="stretch"></li>
</ul>

CSS：

#Navigation
{
    list-style-type: none;
    text-align: justify;
    height: 21px;
    background: #ccc
}

#Navigation li
{
    display: inline
}
#Navigation .stretch {
    display: inline-block;
    width: 100%;

    /* if you need IE6/7 support */
    *display: inline;
    zoom: 1
}

IE6/7トリックの詳細： インラインブロックはInternet Explorer 7、6では機能しません

35
thirtydot

これは、ul要素の擬似要素を使用しても実現できます。

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: justify;
}

ul:after {
    content: "";
    width: 100%;
    display: inline-block;
}

li {
    display: inline;
}
24
Ben Foster

ただやる：

ul { width:100%; }
ul li {
  display:table-cell;
  width:1%;
}
4
jakosik

これはあなたのニーズに合うかもしれません：

#Navigation{
}
#Navigation li{
    list-style-type: none;
    text-align: center;
    float: left;
    width: 50%; /*if 2 <li> elements, 25% if 4...*/
}

demo： http://jsfiddle.net/KmqzQ/

4
Sparkup

HTML

<ul id="Navigation">
    <li><a href="#">The Missing Link</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Riluri</a></li>
    <li><a href="#">Contact us</a></li>
    <!-- ... -->
    <li class="stretch"></li>
</ul>

CSS

#Navigation {
    list-style-type: none;
    text-align: justify;
    height: 21px;
    background: #ccc
}

#Navigation li{
    display: inline
}

#Navigation li a {
    text-align: left;
    display:inline-block;
}

#Navigation .stretch {
    display: inline-block;
    width: 100%;

    /* if you need IE6/7 support */
    *display: inline;
    zoom: 1
}

デモを見る： http://jsfiddle.net/2kRJv/392/

3
Mark

<li>要素を分離する必要があります。そうしないと、正当化が機能しません。

For example, this:

<ul><li>test</li><li>test</li></ul>


needs to be like this:
<ul>
<li>test</li>
<li>test</li>
</ul>

または、少なくとも<li>タグの開始タグと終了タグの間にスペースが必要です。

1
Adrian Cumpanasu

空白が含まれている場合、マークされた回答は機能しません。

ここでの一番の答えは空白で動作します HTML + CSSで水平メニューを*本当に*正当化するにはどうすればいいですか？

0
artemnih

このブログ には満足のいく堅牢なソリューションがあります。ただし、ul/liナビゲーションに対応するには若干の変更が必要です。

#Navigation {
    width: 100%;
    padding: 0;
    text-align: justify;
    font-size: 0;
    font-size: 12px\9; /* IE 6-9 */
}
#Navigation>li {
    font-size: 12px;
    text-align: center;
    display: inline-block;
    zoom: 1;
    *display: inline; /* IE only */
}
#Navigation:after {
    content:"";
    width: 100%;
    display: inline-block;
    zoom: 1;
    *display: inline;
}

http://jsfiddle.net/mblase75/9vNBs/

0
Blazemonger