从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时，它还需要一个额外的空格。任何解决方案？

Answer 1

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

li {
 display: block;
 float: left;
}

这应该可以防止出现空白

Answer 2

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