22

请在 jsfiddle 中查看此代码

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;
    }

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

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

谢谢

4

9 回答 9

27

看看这个jsFiddle

我已经更新display:inline-block;到display:block;菜单链接并添加float:left到它们。

使用时，标记inline-block中元素之间的空白会导致元素之间出现这种丑陋的内联间隙。HTML

于 2013-06-28T12:46:27.623 回答
15

HTML 中标签之间的任何空格都会折叠成一个空格字符，这就是为什么你有那个间隙。

你可以：

  • 向左浮动你的元素，
  • 将</a>和并排放置<a>在源中或
  • 使用font-size: 0技巧

在这种情况下，尽管从您的源代码中删除空格会带来最少的警告，但我个人会将所有的<a>s 都浮动起来，唯一的一点是它更难以阅读。

于 2013-06-28T12:50:02.137 回答
9

摆脱空间本身：这可能看起来很乱，但实际上这是你能做的最干净的事情。你用 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% 标准的，您可以自由使用评论...

于 2016-02-02T08:37:39.893 回答
1

这是你的解决方案

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;
}
于 2013-06-28T12:52:10.573 回答
1

现在是2017 年：将它们包裹在一个元素中，display: inline-flex并使用以下内容来弯曲内部按钮flex: 0 1 auto：

<div style="display: inline-flex">
    <button style="flex: 0 1 auto">...</button>
于 2017-10-10T03:22:58.507 回答
0

试试这个（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;
}
于 2013-06-28T12:47:13.300 回答
0

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

视觉上可能是也可能不是你想要的。左右两端有圆角，按钮之间有直线。

于 2019-07-16T15:45:26.000 回答
0

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

http://jsfiddle.net/NPqSr/212/

于 2017-08-16T22:45:52.467 回答
0

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

按钮{ margin: 0px; }

于 2018-07-05T12:58:39.303 回答