CSS - 使用显示 : inline property 删除列表菜单中的水平空间

Question

我是 CSS 的新手，我设定了一个目标，即在月底之前学习并使用 CSS 发布我的网站。

我的问题:

我正在尝试构建一个带有悬停下拉菜单的 CSS 水平菜单，但是，当我将 display: inline 属性与 li (列表)项一起使用时，我获取栏中 li(列表)元素之间的水平空间。如何删除此空格？

这是 HTML:

<div id="tabas_menu">
    <ul>
        <li id="tabBut0" class="tabBut">Overview</li>
        <li id="tabBut1" class="tabBut">Collar</li>
        <li id="tabBut2" class="tabBut">Sleeves</li>
        <li id="tabBut3" class="tabBut">Body</li>
    </ul>
</div>

这是 CSS:

#tabas_menu {
    position: absolute;
    background: rgb(123,345,567);
    top: 110px;
    left: 200px;
}

ul#tabas_menu {
    padding: 0;
    margin: 0;
}

.tabBut {
    display: inline;
    white-space: 
    list-style: none;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,142,190,1)),to(rgba(188,22,93,1)));
    background: -moz-linear-gradient(top, rgba(255,142,190,1), rgba(188,22,93,1));
    font-family: helvetica, calibri, sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
    text-shadow: 1px 1px 1px rgba(99,99,99,0.5);
    -moz-border-radius: 0.3em;
    -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
    -webkit-border-radius: 0.3em;
    -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
    padding: 6px 18px;
    border: 1px solid rgba(0,0,0,0.4);
    margin: 0;
}

我可以使用 float: left/right 属性删除空格，但我很困惑为什么我不能仅使用 display 属性来达到相同的效果。

Answer 1

我有一个 remarkably similar question几周前。

水平空间非常合理。在内联元素之间，空格很重要。当您在通用样式下考虑以下标记时，这非常有意义:

<b>Label:</b> <span>content</span>

如果把这段内容渲染成下面这样，你会不会感到沮丧？

标签:内容

HTML 中 block 元素的流行让我们忘记了空格的作用。但我们必须记住，无论何时使用内联元素(包括内联 block 元素)，标记中的空格实际上都很重要，因为 HTML 从根本上说是一种标记，而不是一种编码语言。

您的问题有一些解决方案(假设您出于审美原因想要保留 HTML 中的空白——如果这不重要，只需删除空格并完成)，其中最简单的方法是应用font-size: 0px 到父容器，然后将字体大小恢复为 font-size: 16px 或每个内联元素中的任何值。这使得它们之间的文本节点的字体大小为零。