如何修复一个按钮，使其不会改变其位置对其相邻元素的影响？答案

【问题标题】：How to fix a button so that it does not change its position on effect of its neighbouring elements?如何修复一个按钮，使其不会改变其位置对其相邻元素的影响？
【发布时间】：2018-07-28 17:36:11
【问题描述】：

我有这个代码..

<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;
}

【问题讨论】：

请分享你的css代码..
为数量添加宽度
试过的宽度..没用！
因为它是一个跨度，所以你需要在应用宽度之前使它成为内联块

标签： html css twitter-bootstrap

【解决方案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>

【讨论】：

很高兴为您提供帮助:)

【解决方案2】：

这里是Demo

您需要 float: left 每个 button 和 .quantity 然后给 .quantity 宽度。如果数字增加并溢出，将显示滚动条。

button,
.quantity {
  float: left
}

.bold {
  font-weight: bold;
}

.font20 {
  font-size: 20px;
}

.quantity {
  /* make text  horizontal center */
  text-align: center;
  border: 1px solid #ccc;
  /* need to display span as block */
  display: block;
  width: 70px;
  /*if overflow show scrollbar or you can change to overflow-x: hidden without scrollbar */
  overflow-x: auto;
  font-weight: bold;
  margin: 0 10px;
}

.clearFloat {
  clear: both;
}

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

<span class='quantity bold font20' val='1'>99999</span>

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

<!-- For Clearing float -->
<div class="clearFloat"></div>

【讨论】：