Question

我有一个文本字段（输入type =“ text”）和一个选择列表。文本字段比选择列表宽。它们都位于弹性框的单独行中。如何使用纯CSS（不使用JavaScript）使文本字段与选择列表的宽度相同？

看起来像这样：

<div style="display: flex; flex-direction: column">
  <input type="text">
  <select>
    <option>Tiny</option>
  </select>
</div>

发生的事情是选择列表增加到文本输入的大小（由浏览器指定其默认大小），而不是输入缩小到列表的大小。

很抱歉以前是否有人问过这个问题（如果可以的话，将提供一个链接），但是到目前为止，我找不到任何解决此明显问题的东西。

Answer 1

您可以输入position:absolute，以便选择将指定容器的宽度（设置为inline-block），然后输入将延伸到该宽度：

.container {
  display: inline-block;
  position: relative;
}

input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
}

select {
  margin-top: 22px;
}

<div class="container">
  <input type="text">
  <select>
    <option>Tiny</option>
  </select>
</div>

<div class="container">
  <input type="text">
  <select>
    <option>long option</option>
  </select>
</div>

<div class="container">
  <input type="text">
  <select>
    <option>very very long option</option>
  </select>
</div>

Answer 2

一个简单的解决方案是使用inline-flex而不是flex：

<div style="display: inline-flex; flex-direction: column">
  <input type="text">
  <select>
    <option>Tiny</option>
  </select>
</div>

文字输入-缩小到最小

2 个答案: