白色空间:Nowrap和100％宽度的儿童

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 {
    width: 100%;
    white-space: nowrap;
}
input {
    width: 33%;
    display: inline-block;
}

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