Question

我有设置select-element（html）宽度的问题。问题可分为两部分：

select元素的宽度= 2个输入元素的总宽度。
当改变其中一个输入元素的宽度时=自动调整select元素的宽度。

是否可以仅使用纯CSS来解决这个问题？

<!DOCTYPE html>
<html>
<body>
<div style="display: inline-block; background: blue;">

<select>
  <option value="volvo">Volvo Volvo Volvo Volvo Volvo Volvo  </option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
</div>
<br>

<input size="8" type="text" value="hej">
<input size="8" type="text" value="hej">

</div>
  
</body>
</html>

修改请注意，input-elements的属性为'size =“8”'。我希望它们具有这么大的尺寸，因为项目的其余部分都具有这种外观。因此，只有select元素才能缩小/增大。

Answer 1

这样的东西？

我所做的是将两个输入元素作为兄弟选择标记放置。并使select标签位置相对于其父级即div是绝对的。这仅在我们知道/可以控制选择标记的高度时才有效。

我将padding-top应用于div，它必须等于select标签的高度。

＆＃13;

select {
  width: 100%;
  display: block;
  position: absolute;
  height: 30px;
  top: 0px;
}
div {
  position: relative;
  padding-top: 30px;
}

＆＃13;

<!DOCTYPE html>
<html>
<body>
  <div style="display: inline-block; background: blue;">
    <select>
      <option value="volvo">Volvo Volvo Volvo Volvo Volvo Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
    <input size="8" type="text" value="hej">
    <input size="8" type="text" value="hej">
  </div>
  <br>
  </div>
</body>
</html>

＆＃13;

Answer 2

Flexbox可以很好地解决这个问题，但是你不能将select设置为百分比，然后将输入设置为该百分比的一半吗？

* {
  box-sizing: border-box;
}
.select-container {
  width: 100%;
  }
select {
  width: 100%;
}

input {
  width: 49%;
}

<!DOCTYPE html>
<html>
<body>
<div class="select-container" style="display: inline-block; background: blue;">

<select>
  <option value="volvo">Volvo Volvo Volvo Volvo Volvo Volvo  </option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
</div>
<br>

<input size="8" type="text" value="hej">
<input size="8" type="text" value="hej">

</div>
  
</body>
</html>

通过兄弟元素的宽度调整select元素的宽度

2 个答案: