web-dev-qa-db-ja.com

divの幅に合わせて水平ulをストレッチします

私のサイトのメインnavには、メインnavリンクのulを持つ980px幅のdivがあります。 divの幅に均等に収まるようにnavリンクを伸縮させようとしています。

<div style="width: 980px;">
<ul id="horizontal-style">
  <li><a href="#">Nav Item</a></li>
  <li><a href="#">Short Item</a></li>
  <li><a href="#">Really Long Nav Item</a></li>
  <li><a href="#">Nav Link</a></li>
  <li><a href="#">Another Link</a></li>
</ul>
</div>

Ulリストを水平に作成するために、いくつかの典型的なcssを実行しています（float：左、display：ブロック）。 Liのパディングを微調整して非常に近づけることができますが、本当に必要なのは、自動的に収まるように伸縮させる方法です。可能？

編集難易度1：テーブルを使用できません。難易度2：各ナビゲーションアイテムは、より長いリンク名とより短いリンク名に対応するために異なる幅になります。

csslayouthtmlhtml-lists
43
Alan

これが最も簡単な方法です。 http://jsfiddle.net/thirtydot/jwJBd/

（またはtable-layout: fixed均等な幅の分布の場合： http://jsfiddle.net/thirtydot/jwJBd/59/ ）

IE7では、これは 動作しません です。

#horizontal-style {
    display: table;
    width: 100%;
    /*table-layout: fixed;*/
}
#horizontal-style li {
    display: table-cell;
}
#horizontal-style a {
    display: block;
    border: 1px solid red;
    text-align: center;
    margin: 0 5px;
    background: #999;
}

編集前の古い回答： http://jsfiddle.net/thirtydot/DsqWr/

108
thirtydot

非表形式データのテーブルは嫌いですが、あなたが求めているのは、まさにテーブルが得意なものです。 <table width="100%">

5
Shad

エレガントな（しかし効果的な）方法：パーセンテージを使用する

#horizontal-style {
    width: 100%;
}

li {
    width: 20%;
}

これは5 <li>の例でのみ機能します。多かれ少なかれ、それに応じて割合を変更します。ページに他の<li>sがある場合、これらの特定のものに「menu-li」のクラスを常に割り当てることができ、それらだけが影響を受けます。

2
gailbear
#horizontal-style {
    width: 100%;
}

li {
    width: 20%;
}

このアプローチは、最小の画面で20％になり、小さすぎるか、別の方法で別のブレークポイントでメディアクエリを実行するため、応答しません。

1
K. Kaur