Question

标题说标签，因为这是我的用例，但显然它可能是任何元素。我想要实现的是以下表单布局：

        [label] [input]
[another label] [input]
  [third label] [input]

目前我的HTML大致看起来像（省略细节）：

div {
    overflow: auto;
}
label, input {
    float: left;
}
label {
    text-align: right;
    width: 200px;
 }

<div>
    <label>Label</label> 
    <input type="text">
</div>
<div>
    <label>Another label</label> 
    <input type="text">
</div>
<div>
    <label>Third label</label> 
    <input type="text">
</div>

但是，设计要求我缩小标签以适应最高标签，因此我不能使用固定宽度。我需要最长的标签才能完全适合屏幕的左侧和输入，所有其他标签也应该达到这个宽度。

我正在寻找的是实现这种布局的最佳方法，同时保持HTML尽可能的语义（这里有一个额外的div或者没有问题，我现在使用它们来更轻松地控制垂直对齐以及一些小的造型）。目前我的文本输入大小相同，但也有一些无线电/复选框必须驻留在[input]部分。

另外，我想保持我的选项开放，以便使用媒体查询来应用一些RWD元素。这不是这个特定项目的大要求，但你永远不知道。哦，不幸的是，我必须支持低至9的IE。

我如何以IE9和IE10支持的语义正确（即不使用表格）的方式解决这些问题？

Answer 1

一个疯狂的想法是将标签和输入组合在一起是单独的div。棘手的部分是通过line-height正确排列它们。

<div id="labels">
  <label>...</label>
  ...
</div>
<div id="inputs">
  <input>...</input>
  ...
</div>

CSS：

#labels {
    float: left;
}
#labels label {
    display: block;
    text-align: right;
    line-height: 20px;
}
#inputs input {
    display: block;
    line-height: 20px;
}

Answer 2

显然我对使用display: table-cell有错误的想法，或者我在初始测试中做错了什么。这似乎足以让我得到我想要的东西

＆＃13;

div {
    display: table-row;
}
label, input {
    display: table-cell;
}
label {
    text-align: right;
}

＆＃13;

<div>
    <label>Label</label> 
    <input type="text">
</div>
<div>
    <label>Another label</label> 
    <input type="text">
</div>
<div>
    <label>Third label</label> 
    <input type="text">
</div>

＆＃13;

内联形式，缩小以适合左侧的标签

2 个答案: