0

リストメニューがあります

<ul>
<li>item1</li>
<li>item2</li>
<li>longitem3</li>
</ul>

メニューCSS

ul{
width:500px;
}
li {
float:left;
}

このように項目間に同じスペースができるように、メニュー内の項目を自動的に配布したいと思います

{メニュー}{アイテム}{スペース}{アイテム}{スペース}{アイテム}{メニュー}

javascriptではなく、htmlとcssのみを使用してこれを行うことは可能ですか? ありがとう

4

4 に答える 4

2

次のように、すべての < li> に影響を与えるのではなく、css クラスを使用します。

<li class="menuItem">

CSSについては：

.menuItem {
    float: left;
    margin-right: <some number of px>;
}
.menuItem:last-child {
    margin-right: 0;
}

':last-child' セレクターは以前の定義をオーバーライドし、最後のメニュー項目の右側のスペースを削除します。

于 2011-10-17T22:50:22.887 に答える
1

li の右側にマージンを追加できます

li { float:left; margin-right: 5px}
于 2011-10-17T22:37:34.543 に答える
1

li各アイテムの右側にパディングを追加するだけです。

li {
float:left;
padding-right:20px;
}
于 2011-10-17T22:37:47.497 に答える
0 
ul {
    text-align: center;
}

li {
    display: inline-block;
}
于 2011-10-17T22:42:31.873 に答える