CSS - 使用display：inline属性删除列表菜单中的水平空间 [英] CSS - removing horizontal space in list menu using display: inline property

问题描述

我是CSS的新手，有一个设定的学习目标。

I'm new to CSS and have a set target of learning & publishing my website in CSS by the end of the month.

我的问题：

我试图使用悬浮下拉菜单创建一个CSS水平菜单，但是当我使用 display：inline 属性与 li ）项，我在栏中的 li （列表）项之间获得水平空间。如何删除此空格？

I'm trying to build a CSS horizontal menu with hover drop downs, however, when I use the display: inline property with li (list) items, I get horizontal spaces between the li (list) items in the bar. How do I remove this space?

以下是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：左/右属性，但它是bug，我为什么我不能通过使用display属性实现相同的效果。

I can get the space removed using the float: left/right property but it's bugging me as to why I cannot achieve the same effect by just using the display property.

推荐答案

我有一个非常类似的问题。

水平空间是完全合理的。在内联元素之间，whitespace事情。当您在通用样式下考虑以下标记时，这是非常有意义的：

The horizontal spaces are perfectly reasonable. Between inline elements, whitespace matters. This makes perfect sense when you consider the following markup under generic styles:

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

如果此内容呈现为以下内容，您不会感到沮丧？

Wouldn't you feel frustrated if this content rendered as the following?

标签：内容

HTML中块元素的普遍性使我们忘记了空格的作用。但是我们必须记住，每当使用内联元素（包括inline-block元素）时，标记中的空格实际上是重要的，因为HTML基本上是一个标记，而不是编码语言。

The prevalence of block elements in HTML spoils us into forgetting about the role of whitespace. But we must remember that whenever using inline elements (including inline-block elements), that whitespace in the markup actually does matter since HTML is fundamentally a markup and not a coding language.

有几个解决方案你的问题（假设你想保持在空白的HTML中的审美原因—如果这不重要，只是删除的空间，并与它完成），最简单的是应用 font-size：0px 到父容器，然后将字体大小恢复为 font-size：16px 在每个内联元素中。这使得它们之间的文本节点的字体大小为零。

There a a few solutions to your problem (assuming you want to hold onto the whitespace in the HTML for aesthetic reasons—if this is not important, just remove the space and be done with it), the easiest of which is to apply font-size: 0px to the parent container and then restore the font size to font-size: 16px or whatever it is in each of the inline elements. This makes it so that the text nodes between them have a font size of zero.

这篇关于CSS - 使用display：inline属性删除列表菜单中的水平空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！