相关疑难解决方法(0)

带有标签+字段单元的表格可以包装,但在包装时可以很好地排列

我有一个流体设计的表格,由一系列标签和字段组成,我希望它们一个接一个地流动,并在必要时包裹以支撑窗口的宽度.(标签和输入必须作为一个单元流动,在一行的末尾没有悬挂标签,其输入在下一行.)但是当它们换行时,我希望这些字段以整齐的方式排列.有没有办法用HTML和CSS做到这一点？(不幸的是,我必须支持没有CSS3列的旧浏览器[如果他们甚至在这里帮助].)

我尝试了几件事,比如给标签(好吧,跨度)一个固定长度(你要点击代码片段中的"全屏"按钮,这样片段窗口宽度不固定):

.wrapped-fields label {
  display: inline-block;
}
.wrapped-fields label > span {
  display: inline-block;
  width: 8em;
  white-space: nowrap;
}

Run Code Online (Sandbox Code Playgroud)

<form class="wrapped-fields">
  <label>
    <span>Short:</span>
    <input type="text" size="5">
  </label>
  <label>
    <span>Long label for field:</span>
    <input type="text" size="5">
  </label>
  <label>
    <span>Medium label:</span>
    <input type="text" size="5">
  </label>
  <label>
    <span>Short:</span>
    <input type="text" size="5">
  </label>
  <label>
    <span>Long label for field:</span>
    <input type="text" size="5">
  </label>
  <label>
    <span>Medium label:</span>
    <input type="text" size="5">
  </label>
</form>

Run Code Online (Sandbox Code Playgroud)

......但由于以下几个原因,这是不能令人满意的: