html - 如何修复按钮，使其不会因相邻元素的影响而改变其位置？

Question

我有这个代码..

<button class='btn btn-danger btn-xs minus'>
    <span class='glyphicon glyphicon-minus'></span>
</button>

&nbsp;
<span class='quantity bold font20' val='1'>1</span>
&nbsp;

<button class='btn btn-success btn-xs plus'>
    <span class='glyphicon glyphicon-plus'></span>
</button>

单击加号按钮时，数量值增加，单击减号按钮时，数量值减少!

但是随着值的增加或减少，加号按钮会向右或向左移动... 我怎样才能固定它？因此，在增加值时，按钮不会离开它的位置!

这是我的 CSS..

.bold
{
    font-weight: bold;
}

.font20
{
    font-size: 20px;
}

Answer 1

试试这个:在 span 标签中添加宽度和高度

.quantity {
  display: inline-block;
  width: 50px;
  text-align: center;
  height: 30px;
  background: #f1f1f1;
  vertical-align: middle;
}
.bold {
    font-weight: bold;
}

.font20 {
    font-size: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button class='btn btn-danger btn-xs minus'>
    <span class='glyphicon glyphicon-minus'></span>
</button>

&nbsp;
<span class='quantity bold font20' val='1'>1</span>
&nbsp;

<button class='btn btn-success btn-xs plus'>
    <span class='glyphicon glyphicon-plus'></span>
</button>