0

一番下の行にリスト項目の全幅を含む複数行の順序なしリストを作成するにはどうすればよいですか?

通常、次のようにレンダリングされます。

アイテム1 アイテム2 アイテム3 アイテム4 アイテム5 アイテム6 アイテム7

アイテム8 アイテム9

どうすれば次のことを達成できますか?

アイテム8 アイテム9

アイテム1 アイテム2 アイテム3 アイテム4 アイテム5 アイテム6 アイテム7

私がCSSで試したことは次のとおりです。

.footer { width: 500px; overflow: hidden; background-color:#ccc; }
.footer ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
.footer ul li { position: relative; float: left; display: block; right: 50%; }
4

2 に答える 2

1

要素を絶対的に配置しないと、順序付けられていないリストはあなたが望むことをすることができません。要素は、HTML でレンダリングされた順序でのみ表示できます。

于 2012-10-05T17:41:45.967 に答える
0

ul を「display: table cell」としてレンダリングしてみて、「vertical-align: bottom」を使用できるかもしれませんが、うまくいくかどうかはわかりません。私はこれをDIVタグで成功させました。「li」タグも同様にレンダリングすることを心に留めておいてください。「display: inline」のように...頑張ってください!

さて、うまくいきました:)

<ul style="display: table-cell; width: 200px; height: 250px; vertical-align: bottom;">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>

ul の定義された領域 (幅 x 高さ) の下部から始まるリストが表示されます。

注: 「ul」に「Position: absolute」属性がある場合は機能しません。それが必要な場合は、ul を「div」で囲むなど、別の要素をラップしてみてください。

于 2013-03-26T13:11:24.253 に答える