logo标签列表

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

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

当快速切换两个按钮时，你会注意到两个按钮之间实际上存在一些间隙。我想摆脱这个空间。有什么好的建议吗？如果您回答问题，请同时解释为什么某个属性会解决这个问题。

我知道可以使用padding和margin进行微调，但结果可能在缩放时出现扭曲。请指出一种稳定的解决方法。

谢谢

7
HTML中标签之间的任何空格都会被压缩为一个空格字符，这就是为什么您会看到那个间隙。您可以将元素浮动到左侧，在源代码中将</a>和<a>放在一起，或使用font-size:0技巧来解决此问题。 - Bojangles
啊，这个行了。谢谢。我基本上把<a>标签放在一起了。 - amin
@Bojangles 您的评论比已发布的答案更好 ;) - xec
@xec 谢谢。我现在也把它发布为答案了。 - Bojangles
9个回答
27

看一下这个jsFiddle

我已经将菜单链接的display:inline-block;更新为display:block;，并给它们添加了float:left。

当你使用inline-block时，在HTML标记中元素之间的空白会导致丑陋的内联间隙。

嘿，如果我想把按钮移到页面中心怎么办？ - amin
margin 实际上为每个按钮提供了一个边距。 - amin
所以又出现了间隙。我只想沿水平平面移动按钮的位置。 - amin
1
更新的 jsFiddle（http://jsfiddle.net/NPqSr/8/）- 没有间隙，按钮居中。这是通过在 #menu 中使用居中的包装器 <div> 完成的 - 如果这对您有用，请告诉我。 - Yotam Omer
哦... .wrapper 是从哪里来的？它不在 HTML 代码中吗？噢，我的错，找到它了。太傻了。 - amin
显示剩余2条评论
15
任何 HTML 标签之间的空格都会被压缩为一个空格字符，这就是你看到的空隙原因。
你可以：
  • 将元素向左浮动，
  • 将 </a> 和 <a> 放在源代码中并排显示，或者
  • 使用 font-size: 0 技巧。
在这种情况下，我个人会将所有的 <a> 元素向左浮动。虽然从源代码中删除空格带来的问题最少，但唯一的问题是它更难阅读。
嗨，谢谢你的回答。虽然你的答案是正确的，但我从Yotam Omer那里学到了更多。希望你不介意我选择他的答案为最佳答案。再次感谢你。 - amin
没关系，我的也不是很有信息量，只是列举了一些不同的想法来帮助人们入门。 - Bojangles
字体大小为0太妙了！ - csomakk
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%标准的，您可以随意使用注释...

1

现在是2017年：将它们包装在具有display: inline-flex属性的元素中，并使用类似flex: 0 1 auto的方式对内部按钮进行弹性布局：

<div style="display: inline-flex">
    <button style="flex: 0 1 auto">...</button>
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;
}
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;
}
2
您这里什么都没有修复，空格还在。 - Bojangles
0
0
将以下样式添加到您的按钮中。如果需要，使前几个按钮的边距为负数。
按钮{ margin: 0px; }
0

我认为使用最新的CSS可能会有一个更简洁的解决方案，即在菜单上使用display:inline-flex，在按钮上使用display:flex，并且可能在菜单上使用width:100%：

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接