Question

我正在尝试在This Demo创建垂直和水平组按钮，但无法删除button-group-v组按钮之间的空间！并且button-group-h按钮之间也有重叠的边框（在中间的顶部和底部）。如果这是创建组按钮的正确解决方案，请告诉我？如果是这样，请告诉我如何解决上述问题？

<ul class="button-group-v">
    <li><button class="btn button">Button</button></li>
    <li><button class="btn button">Button</button></li> 
    <li><button class="btn button">Button</button></li>
</ul>

<ul class="button-group-h">
    <li><button class="btn button">Button</button></li>
    <li><button class="btn button">Button</button></li> 
    <li><button class="btn button">Button</button></li>
</ul>


.btn {
    background: #d2f21b;
    font-family: Arial;
    color: #ffffff;
    font-size: 20px;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    margin:0px;
    border:none;
    border: 1px solid #ccc;
}
.button-group-v, .button-group-v li {
    display: inline-block;
    margin:0px;
}

.button-group-h, .button-group-h li {
    margin:0px;
    list-style-type: none;
}

由于

Answer 1

内联元素对空白区域敏感。只需删除它：

<ul class="button-group-v">
    <li><button class="btn button">Button</button></li><li><button class="btn button">Button</button></li><li><button class="btn button">Button</button></li>
</ul>

<强> jsFiddle example

另一个选择是使用HTML注释忽略空格：

<ul class="button-group-v">
    <li>
        <button class="btn button">Button</button>
    </li><!--
    --><li>
        <button class="btn button">Button</button><!--
    </li><!--
    --><li>
        <button class="btn button">Button</button>
    </li>
</ul>

<强> jsFiddle example

您还可以浮动列表项目，但这也需要清除列表后面的第一个元素。

至于元素之间没有间距的垂直列表，这是由于margin:0px;上的.btn所致。

创建组按钮的问题

1 个答案: