html - 2 inc/dec 按钮的 css 通过在调整屏幕大小时正确重新定位的输入

Question

我想在 html 中显示一个输入框和右侧的 2 个小按钮，一个在彼此之上。像这样

https://jsfiddle.net/danaya/yw94f0Lt/3/

html代码很简单

<div class="list">
  <div class="name">product</div>
  <div class="input">
    <input type="text" size="3" value="1">
    <div class="inc">+</div>
    <div class="dec">-</div>
  </div>
  <div class="price">2.99</div>
</div>

这是CSS

.list {
  display: flex;
}

.name,
.input,
.price {
  padding: 10px 10px;
  border: 1px solid red;
}

.name {
  width: 50%;
}

.input,
.price {
  text-align: right;
  width: 25%;
}

.input {
  position: relative;
  top: -5px;
}

input {
  line-height: 25px;
}

.inc,
.dec {
  display: block;
  position: absolute;
  width: 13px;
  height: 13px;
  background-color: #999;
  text-align: center;
  color: #fff;
  line-height: 12px;
}

.inc {
  top: 11px;
  left: 40px;
}

.dec {
  top: 25px;
  left: 40px;
}

就像现在一样，当我调整窗口大小时，div.input 也会调整大小，因此与输入相关的按钮会因输入元素而失去它们的位置。

我需要在 .list 元素中保留 flex 显示，但除此之外我可以更改任何内容。我还需要按钮不增加 div.input 元素的宽度，这就是我使用 position:relative 的原因。

有什么想法吗？ 谢谢

Answer 1

这对你有用吗？

.list {
  display: flex;
  align-items: center;
}

.name,
.price {
padding: 0 10px;
}

.input, input {
  box-sizing: border-box; /*to set the equal height to bot .input and input*/
  height: 31px; /*13 + 13 (buttons) + 5 (paddings for buttons) = 31px */
 
}
.input {
  position: relative;
  /*width: 25%; Use this if you want to increate the width of your div.input*/
}
input {
  padding-right: 15px; /* 15px set so that input characters do not go underneath the + and - buttons */
  width: 100%; /* set 100% so that input will take 100% width of its parent size */
}

.inc,
.dec {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 13px;
  height: 13px;
  background-color: #999;
  text-align: center;
  color: #fff;
  line-height: 12px;
}

.inc {
  top: 2px;
  right: 2px;
}

.dec {
  bottom: 2px;
  right: 2px;
}

<div class="list">
  <div class="name">product</div>
  <div class="input">
    <input type="text" size="3" value="1">
    <span class="inc">+</span>
    <span class="dec">-</span>
  </div>
  <div class="price">2.99</div>
</div>