时间戳

首页 > 解决方案 > 如何修复一个按钮，使其不会改变其位置对其相邻元素的影响？

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

问题描述

我有这个代码..

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

标签： htmlcsstwitter-bootstrap

解决方案

这是演示

你需要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>

推荐阅读