13

与えられたリスト：

<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

そしてこのCSS：

ul { display: table; width: 600px; }
li { display: table-cell; width: 33%; }

それぞれ200pxっぽい幅の3列の3行が期待されます。しかし、li幅は無視されているようです。

display: table-cell余分なマークアップを追加せずに行を強制する方法はありますか？

編集： また、table-cell各行の3つのセルすべてに何かを配置したいので、行全体を同じ高さにしたいので、使用していますが、一番下のセルの一番下にあります。それは私が知っている紛らわしい文章です。

li基本的に、 sの束を同じ高さの列に変換したいのですが、複数の行はCSSのみを使用しています。私が見たすべての同じ高さのカラムソリューションはこれを行うことができません。

4

6 に答える 6

13

LIdisplay:inline-tableの代わりに与えることができます。display:table-cellこのように書いてください：

ul { display: table; width: 600px; font-size:0;}
li { display: inline-table; width: 33%;background:red; font-size:15px;}

これをチェックしてくださいhttp://jsfiddle.net/56FGT/1/

于 2012-05-15T07:03:57.717 に答える
3

cssに同じ<li>幅の各行に3つのsを表示させたい場合は、上記のhtmlで次のようなものを試すことができます。200px<ul>

ul { list-style: none outside none; width: 600px; }
li { float: left;display: block;width: 200px; height: 33px; }​

デモ

于 2012-05-15T07:03:22.523 に答える
3

これが私が思いついた解決策です。

空白を削除するために、マークアップがわずかに変更されています。これは、lisをに設定するdisplay: inlineと、それらの間の改行が幅の一部を占めるためです。

于 2012-05-17T00:31:00.897 に答える
1

セマンティックな解決策はないと思います。アイテムのすべてのセットが同じ高さを適用するためのラッパーコンテナである必要があります。しかし、デザインの問題を解決することは可能です（ちょっとグリッドを作成します）これはそれを作成する方法の例です：行に同じ高さの複数の行

于 2012-09-10T16:01:22.013 に答える
1

私は使用display: inline-blockしていますvertical-align: top

しかし、高さとともに伸びる背景が必要な場合は、javascriptが唯一の方法です（私が考えることができます）

于 2013-04-01T18:34:30.063 に答える
0

マークアップを変更できない場合は、テーブルを偽造せずに変更できます。display:blockの代わりにリストアイテムを作成できますdisplay:table-cell。

ちなみに、の33％600pxは200ピクセルではありません。使用してください200px！

編集：
コンテンツの最大の高さがわかっている場合は、もちろんそれをすべてのリストアイテムの高さとして使用し、vertical-alignまたはline-heightを使用してコンテンツを整列させることができます。（しかし、それもオプションではないので、マークアップを変更しないソリューションが出ています。）

于 2012-05-15T07:03:11.640 に答える