1

私は水平方向のリストを持っています。次のスペースなしで各リスト項目をクリックできるようにしたいです。

HTML:

<ul id="server-header-list">
    <li>item1: </li>
    <li>item1 value</li>
    <li>testing list item2: </li>
    <li>value of item2</li>
</ul>

CSS: 

#server-header-list li {
    display: inline;
    list-style-type: none;
    padding-right: 7px;
    white-space: nowrap;
}

現在、出力は次のようになります。

item1: item1 value  testing list item2: value of item2

これはいい。しかし、例えばitem2の値をクリックしようとすると、「item2の値」だけではなく行全体が選択され、item1をクリックすると、それに続く余分なスペースが1つ必要になります。解決策はありますか？

4

2 に答える 2

4

これは、あなた<li>の (または<ui>、タイプミスだと思われる) がインラインで表示されるためです。次のようなことができます。

li {
 display: block;
 float: left;
}

これにより、空白が表示されなくなります

于 2012-08-03T15:41:20.347 に答える
3

<ui>タグを変更することをお勧めします。これは有効なタグ<li>ではないと思います。<ui>これで多分直ります

于 2012-08-03T14:30:03.577 に答える