从CSS inline元素中删除多余的空格 [英] Remove extra spaces from CSS inline element

问题描述

我有一个水平列表，我希望能够点击每个列表项而不包含以下空格。

I have a horizontal list, I want to be able to click on each of the list items without the following spaces.

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，它需要一个额外的后续空间。任何解决方案？

This is good. But when I try to click on e.g. value of item2 it selects the whole row instead of only the "value of item2" also when I click on item1, it takes one extra following space with it. Any solutions?

推荐答案

这是因为< li> （或< ui> '，但我怀疑是拼写错误）显示为内联。你可以这样做：

this is because your <li>'s (or <ui>'s but i suspect that's a typo) are displayed as inline. You could do something like this:

li {
 display: block;
 float: left;
}

这应该可以防止空格出现

this should prevent the whitespace from appearing

这篇关于从CSS inline元素中删除多余的空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！