Question

我有一些文字输入（它的数量可能各不相同），我需要将它们放在div中，在所有宽度上拉伸但是在一行中。

<div>
    <input type="text" />
    <input type="text" />
    <input type="text" />
</div>

div {
    width: 300px;
    white-space: nowrap;
}

input {
    width: 100%;
    display: inline-block;
}

JSFiddle

但是我没想到会这样。我不想手动设置输入的宽度（以px为单位）。有可能吗？

Answer 1

试试这个。输入不像div，你必须给它一个显示值。

input {
  width: 100%;
  display: inline-block; clear:both; display:block;
}

Answer 2

假设您正在尝试根据页面平均延伸输入。

这是扩展其容器的流体尺寸div的问题，然后通过将它们的尺寸设置为33％，将相同的流体尺寸应用于输入（假设它们各自相等）。然后它们将以div的整个宽度拉伸，div将以其所在容器（或页面）的整个宽度拉伸。

＆＃13;

div {
    width: 100%;
    white-space: nowrap;
}

input {
    width: 33%;
    display: inline-block;
}

＆＃13;

<div>
    <input type="text" />
    <input type="text" />
    <input type="text" />
</div>

＆＃13;

白色空间：nowrap和宽度为100％的儿童

2 个答案: