Question

HTML：

<div id="main">
    <div id="menu">
        <a href="#" class="buttons">Home</a>
        <a href="#" class="buttons">About Us</a>
        <a href="#" class="buttons">Pictures</a>
        <a href="#" class="buttons">Contact Us</a>
    </div>
</div>

CSS：

#main
{
    width: 64em;
    height: 25em;
}

#menu

    {
        background-color: #00b875;
        height: 3em;
    }

    .buttons
    {
        text-decoration: none;
        color: #ffffff;
        line-height: 3em;
        display: inline-block;
        padding-left: 10px;
        padding-right: 10px;
        font-family: courier new;
        -moz-transition: 1s linear;
        -ms-transition: 1s linear;
        -o-transition: 1s linear;
        -webkit-transition: 1s linear;
        transition: 1s linear;
    }

    .buttons:hover
    {
        background-color: #0d96d6;
    }

当从一个按钮快速切换到另一个按钮时，您会注意到两个按钮之间实际上存在一些间隙。我想摆脱这个空间。有任何想法吗？如果您确实回答了这个问题，请解释为什么某个财产会解决这个问题。

我知道它可以使用填充和边距进行调整，但结果可能会在缩放时失真。请指出解决问题的稳定方法。

感谢

Answer 1

看看这个jsFiddle

我已在菜单链接上将display:inline-block;更新为display:block;，并向其添加了float:left。

当您使用inline-block时，您的HTML标记中的元素之间的空格会导致元素之间存在这种丑陋的内联差距。

Answer 2

HTML中标记之间的任何空格都会折叠为单个空格字符，这就是您有这种差距的原因。

你可以：

将你的元素浮动，
将</a>和<a>彼此相邻放在来源或
使用font-size: 0技巧

在这种情况下，我个人会把我<a>左侧的所有内容都浮动，虽然从你的来源中删除空格会带来最少的警告，唯一的一点是它更难以阅读。

Answer 3

摆脱空间本身：这可能看起来很乱，但实际上它是你能做的最干净的事情。你用CSS技巧实现的任何东西只是把空间放在那里然后否认它们的存在。相反，你可能想省略它们;要解决的唯一问题是可读性。

因此，让它变得可读：

<div id="main">
    <div id="menu">
        <!--
        --><a href="#" class="buttons">Home</a><!--
        --><a href="#" class="buttons">About Us</a><!--
        --><a href="#" class="buttons">Pictures</a><!--
        --><a href="#" class="buttons">Contact Us</a><!--
        -->
    </div>
</div>

再次，我知道这看起来很奇怪，是的，但请想一想。这里真正的怪人是HTML本身，没有给你一个明确的方法来做到这一点。认为它是一个特殊的标记！它也可以成为HTML标准的一部分;从技术上讲，顺便说一下， 100％标准，您可以自由使用评论......

Answer 4

这是你的解决方案

http://jsfiddle.net/NPqSr/7/

.buttons
{
    text-decoration: none;
    color: #ffffff;
    line-height: 3em;
    display: inline-block;
    padding-left: 10px;
    float:left;
    padding-right: 10px;
    font-family: courier new;
    -moz-transition: 1s linear;
    -ms-transition: 1s linear;
    -o-transition: 1s linear;
    -webkit-transition: 1s linear;
    transition: 1s linear;
}

Answer 5

Try this （的jsfiddle）

CSS

#main {

    height: 25em;
}

#menu {
    background-color: #00b875;
    height: 3em;
}

.buttons {
    text-decoration: none;
    color: #ffffff;
    line-height: 3em;
    display: inline-block;
    padding-left:5px;
    padding-right:5px;
    font-family: courier new;
    -moz-transition: 1s linear;
    -ms-transition: 1s linear;
    -o-transition: 1s linear;
    -webkit-transition: 1s linear;
    transition: 1s linear;
}

.buttons:hover {
    background-color: #0d96d6;
}

Answer 6

我认为使用最新的CSS可能性更清晰的解决方案是在菜单上使用display:inline-flex，在按钮上使用display:flex，在菜单上使用width:100%：

try_files

Answer 7

2017 ：将它们包裹在display: inline-flex的元素中，并使用flex: 0 1 auto等内容按钮展开：

<div style="display: inline-flex">
    <button style="flex: 0 1 auto">...</button>

Answer 8

将以下样式添加到您的按钮。如果需要，将少数几个按钮中的第一个按钮的边距设为负数。

按钮{ margin: 0px; }

Answer 9

如果使用引导程序，则可以通过使用class =“ btn-group”将div包装在按钮中来将按钮组合在一起。 v3.3.7的示例：https://getbootstrap.com/docs/3.3/components/#btn-groups-single

在视觉上可能不是您想要的。在左右两端具有圆角，并且按钮之间具有直线。

如何删除按钮之间的额外空间？

9 个答案:

CSS