0

. _ <div>_ <li>私が 8 を持っている場合<li>、それらは与えられたスペースにかなりうまく収まります。4 つしかない場合<li>、 の下に余分な空白がたくさんあります<li>。の下部に余分なスペースを残すのではなく、CSS を使用して<li>スペースを均等に配置するにはどうすればよいですか?<div><div>

私はこの質問を見つけました: リスト項目を垂直に均等に分散または間隔をあける ことはかなり似ているようですが、選択された答えはなく、実際に問題を解決する答えはありません。理想的には、これは JavaScript ソリューションではなく単なる CSS になります。

4

1 に答える 1

2

liの直接の子としてを持たないことを願っていdivます。これは有効な HTML ではありません。

liをa 内に均等に分散するには、 toとをtoにul設定できます。uldisplay: tablelidisplay: table-row

ul {
    height: 300px;
    display: table;
}
li {
    display: table-row;
}
li:before {
    content:'•';
    float: left;
    width: 20px;
    font-size: 1.8em;
    line-height: 0.75em;
}

ここにあるjsFiddle

をdivラップしていてul、 をliこの 内で垂直方向に均等に配置しdivたい場合、変更する必要があるのは、代わりに を固定に設定し、heightをdivに設定することだけです。ulheight100%

編集

このソリューションは、どのバージョンの IE でもうまく機能しないことに気付きました。この更新されたバージョンでは、疑似要素内の箇条書きをレンダリングすることで修正され、疑似要素に , と を設定してfont-size、line-height見栄えwidthを良くし、物事を並べることができます。アップ、それは IE8+ および他のすべてのブラウザーで動作します。

于 2013-05-25T00:12:14.093 に答える