分组单独的按钮并防止换行

Question

我有一些带有垂直分组的隐藏按钮：

<div id="btGrp">

<input type="button" value="Action_A" class="class_a" /><br>
<input type="button" value="Action_B" class="class_a" /><br>
<input type="button" value="Action_C" class="class_a" /><br>
<input type="button" value="Action_D" class="class_a" /><br>
<input type="button" value="Action_E" class="class_a" /><br>
<input type="button" value="Action_F" class="class_a" /><br>

</div>

CSS：

#btGrp{
float: right;
height: auto;
width: 190;
margin: 55px 20px 0 0;
border: 1px solid orange;
}

.class_a{
display:none;
}

执行某些操作时，会出现相应的按钮：示例：

我想：

这是一个试图表达问题的JSFiddle： http://jsfiddle.net/CW2Z7/25/

Answer 1

删除换行符并将CSS更新为：

#btGrp {
    float: right;
    height: auto;
    width: 190px; // note the addition of 'px'
    margin: 55px 20px 0 0;
    border: 1px solid orange;
}

.class_a {
    display: none;
    min-width: 150px // adjust to suit
}

如果仍存在较大的差距，请检查line-height的计算margin和.class_a CSS。

Answer 2

您可以稍微更改一下HTML：

<div id="btGrp">    
<input type="button" value="Action_A" class="class_a" /><br/>
    <div><input type="button" value="Action_B" class="class_a" /></div>
    <div><input type="button" value="Action_C" class="class_a" /></div>
    <div><input type="button" value="Action_D" class="class_a" /></div>
    <div><input type="button" value="Action_E" class="class_a" /></div>
    <div><input type="button" value="Action_F" class="class_a" /></div>
</div>

<div>
<input type="button" value="Display A, C, E" id="a" /><br/>
</div>

然后你不必设置按钮的宽度，并且每个按钮都在单行中，你不会使用讨厌的<br/>

http://jsfiddle.net/CW2Z7/42/