Question

我想在html中显示一个输入框，在右边显示两个小按钮，一个在另一个上面。像这样的东西

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会调整大小，因此与输入相关的按钮会被输入元素丢失。

我需要将flex显示保留在.list元素中，但除此之外我可以更改任何内容。我还需要按钮不增加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>

通过在调整屏幕大小

1 个答案: