CSS - 使用display:inline属性删除列表菜单中的水平空间

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

几周前我有一个非常相似的问题.

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

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

如果此内容呈现如下,您不会感到沮丧吗？

标签:内容

HTML中块元素的流行破坏了我们忘记空白的作用.但是我们必须记住,每当使用内联元素(包括内联块元素)时,标记中的空白实际上都很重要,因为HTML基本上是标记而不是编码语言.

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