9

これは実際には少し複雑です。

リスト項目が に設定されているナビゲーション リストがありますinline-block。リストの項目数は動的であるため、異なる場合があります。

私の目的は、リスト項目をコンテナの幅全体に広げることです。(たとえば、4 つのリスト項目がある場合、それぞれがコンテナー幅の 25% を占めます [マージン/パディングなどを無視して])

ブラウザーがインラインブロック要素に 4px のマージンを追加するように見えるという複雑な問題があり、それらの間に空白があります (改行/スペースなど)。

私は 2 つの例を持つ出発点としてフィドルを作成しました。

どちらも、要素が別の行に分割されることなく、幅全体が要素によって占有されるという、私が望むものを達成しません。

http://jsfiddle.net/4K4cU/2/

編集: わずかに分離していますが、2 番目の例でlis の下にスペースがあるのはなぜですか? line-height と font-size を 0 に設定したにもかかわらず、

4

5 に答える 5

10

2016 年になり、この質問をflexboxを使用した回答で更新したいと思いました。ブラウザの互換性については、 CanIUseにお問い合わせください。

/* Important styles */
ul {
  display: flex;
}
li {
  flex: 1 1 100%;
  text-align: center;
}

/* Optional demo styles */
* {
  margin: 0;
  padding: 0;
}
ul {
  margin-top: 2em;
  justify-content: space-around;
  list-style: none;
  font-family: Verdana, sans-serif;
}
li {
  padding: 1em 0;
  align-items: center;
  background-color: cornflowerblue;
  color: #fff;
}
li:nth-child(even) {
  background-color: #9980FA;
}
<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

編集前のフィドル(上記のスニペットでインライン化されています)

于 2016-09-15T13:02:16.873 に答える
2

これは、元のコンセプトを修正する 1 つの方法です。

CSS は次のとおりです。

.list {
    padding:0;
    margin:0;
    list-style-type:0;
    overflow: hidden;
    height: 42px;
}
.list li {
    display: inline-block;
    line-height: 40px;
    padding: 0 5px;
    border:1px green solid;
    margin:0;
    text-align:center;
}

親コンテナで.list、子要素を囲む高さを設定します。この場合、40px を選択し、境界を考慮して 2px を追加しました。

また、疑似要素によって生成された 2 行目を非表示にするには、overflow: hiddenオンに設定します。.list

li要素でline-height: 40px、テキストを垂直方向に中央揃えにする設定を行います。

高さが固定されているため、2 番目の行が非表示になり、デザインを壊す余分な空白なしで、境界線などで親のスタイルを設定できます。

デモ: http://jsfiddle.net/audetwebdesign/WaRZT/

フールプルーフではありません...

場合によっては、1 行に収まりきらないほど多くのリンクがある場合があります。その場合、アイテムによって 2 番目の行が強制的に形成される可能性があり、オーバーフローが非表示になっているため、アイテムが表示されません。

等間隔ボーダーボックス

境界ボックスを均等に配置するには、li要素に幅を設定する必要があります。

コンテンツが CMS からのもので、コーディングをある程度制御できる場合は、クラス名を動的に生成して、定義済みの CSS ルールを使用して正しい幅を設定できます。次に例を示します。

.row-of-4 .list li { width: 24%; }
.row-of-5 .list li { width: 19%; }
.row-of-6 .list li { width: 16%; }

参照: http://jsfiddle.net/audetwebdesign/WaRZT/3/

于 2013-06-12T16:14:07.963 に答える
1

これには複数の修正があります。私が好むのは、単純に要素間の空白を削除することです。これは、単にフォント サイズのトリックに非セマンティック CSS が含まれているためです。そして、それはずっと簡単です（笑）。回答が必要なためのコード：

<ul class="list">
    <li>
        text
    </li><li>
        text
    </li><li>
        text
    </li><li>
        text
    </li>
</ul>

更新された jsFiddle。最初のリストには項目が設定されてwidth:25%;おり、ウィンドウに 1 行で収まります。これがあなたの意図したものでないなら、私は誤解していたに違いありません。

編集：リスト項目の数が不明な場合

これにはいくつかの CSS3 がありますが、クロスブラウザー互換性を IE8 に戻すには、JS ソリューションが必要です。このようなものが動作するはずです:

var listItems =  document.querySelectorAll('li');
listItems.style.width = listItems.parentNode.style.width / listItems.length;

2 番目の編集: JS ではなく jQuery の場合

それを翼、しかし：

var $listitems = $('.list').children();
$listitems.width($listitems.parent().width()/$listitems.length);
于 2013-06-12T16:05:53.130 に答える