关于创建组按钮的问题

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

你也可以浮动列出剩下的项目，但那也是r清除列表后的第一个元素。

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