HTML格式

Question

我需要一个带有两列布局（标签 - 输入）的HTML表单。问题是拿着标签的左栏取决于一些用户输入，所以我不能使用固定宽度（例如150px）。结果应如下所示：

   First name:   [ <INPUT> ]
   Last name:    [ <INPUT> ]
   Gender:       [ <INPUT> ]

使用float-layout尝试了很多可能的解决方案但是找不到工作的解决方案。

Answer 1

您可以使用HTML <table>或CSS display:table，例如以下演示。

http://jsfiddle.net/vn9dt5Lv/

.form {
    display: table;
    border-collapse: collapse;
    padding: 0;
    margin: 0;
}
.form > li {
    display: table-row;
}
.form > li > div {
    display: table-cell;
    padding-bottom: 5px;
}
.form > li > div:first-child {
    padding-right: 10px;
}

<ul class="form">
    <li>
        <div><label>First name:</label></div>
        <div><input type="text" /></div>
    </li>
    <li>
        <div><label>Last name:</label></div>
        <div><input type="text" /></div>
    </li>
    <li>
        <div><label>Gender:</label></div>
        <div><input type="radio" name="g" />Male <input type="radio" name="g" />Female</div>
    </li>
</ul>