css - 从 CSS 内联元素中删除多余的空格

Question

我有一个水平列表，我希望能够在没有以下空格的情况下单击每个列表项。

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 时，它会占用一个额外的后续空间。有什么解决办法吗？

score 4 · Accepted Answer

这是因为您<li>的 's （或<ui>'s 但我怀疑这是一个错字）显示为内联。你可以这样做：

li {
 display: block;
 float: left;
}

这应该可以防止出现空白

score 3 · Accepted Answer

我建议将您的<ui>标签更改<li>为我认为您想要的，<ui>这不是有效的标签。这可能会解决它

2 回答 2