HTML-form 的两列 CSS-layout

Question

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

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

尝试了很多可能的浮动布局解决方案，但找不到有效的解决方案。

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>

HTML-form 的两列 CSS-layout

Two column CSS-layout for HTML-form

html

css

layout