css - 文本输入 - 缩小到最小

Question

我有一个文本字段（输入类型 =“文本”）和一个选择列表。文本字段比选择列表宽。它们都位于弹性盒的不同行中。如何使用纯 css（无 javascript）使文本字段与选择列表的宽度相同？

看起来像这样：

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

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

如果之前有人问过这个问题，我深表歉意（如果是这样，将不胜感激），但到目前为止，我找不到任何可以解决这个明显问题的东西。

标签： cssflexbox

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>