Question

我想删除按钮之间的空格，以便当我将鼠标悬停在NORMAL按钮上时，它与HARD按钮之间不会有空格。我该怎么做？这些空白区域来自哪里？

＆＃13;

<div id="stripe">
    <button class="mode">Easy</button>
    <button class="mode">Normal</button>
    <button class="mode selected">Hard</button>
</div>

＆＃13;

\r\n

＆＃13;

Answer 1

删除空格和回车符，或在它们之间添加HTML注释。

＆＃13;

body {
  margin: 0;
}
#stripe {
    background-color: white;
    text-align: center;
    height: 50px;
    color: black;
}

button {
    border: none;
    background: none;
    text-transform: uppercase;
    height: 100%;
    font-weight: 700;
    color: black;
    letter-spacing: 1px;
    font-size: inherit;
    transition: all 0.3s;
    outline: none;
}

button:hover {
    color: white;
    background: black;
}

.selected {
    color: white;
    background: black;
}

＆＃13;

<div id="stripe">
    <button class="mode">Easy</button><!--
    --><button class="mode">Normal</button><!--
    --><button class="mode selected">Hard</button>
</div>

＆＃13;

Answer 2

浏览器总是在某些元素之间添加空格，包括按钮。要删除它们，您需要为其父容器将font-size设置为零。然后，要恢复按钮内的文本大小，请为它们设置font-size。

#stripe {
  font-size: 0;
}

button {
  font-size: 14px; // Set font size that you need here
}

Answer 3

将display: flex;添加到父容器

Answer 4

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

在视觉上可能不是您想要的。左右两端都有圆角，按钮之间有直线。可能可以重新设置样式。

删除HTML，CSS中按钮之间的空格

4 个答案: