css - 表单中的样式列

Question

我有以下表格。如何在没有<table>. 谢谢

<table>
<tr><td><label for="firstname">First Name</label></td><td><input type="text" name="firstname" id="firstname" /></td></tr>
<tr><td><label for="lastname">Last Name</label></td><td><input type="text" name="lastname" id="firstname" /></td></tr>
<tr><td><label for="phone">Phone</label></td><td><input type="text" name="phone" id="phone" /></td></tr>
<tr><td><label for="email">Email</label></td><td><input type="text" name="email" id="email" /></td></tr>
<tr><td><label for="address">address</label></td><td><input type="text" name="address" id="address" /></td></tr>
<tr><td><label for="city">City</label></td><td><input type="text" name="city" id="city" /></td></tr>
<tr><td><label for="State">state</label></td><td><input type="text" name="state" id="state" /></td></tr>
</table>

Answer 1

这对于基本样式来说已经足够了：

input {
    display: block;
}
label {
    width: 100px; /* whatever value you wish */
    float: left;
}

您可以在http://dabblet.com/gist/2794359看到这是如何工作的

---

.label {width:30px;}肯定不会这样做。首先，因为当您编写 时.label，它会选择具有名为 label 的类的元素。其次，即使你没有使用点，label默认情况下该元素也是一个内联元素，所以如果你不给它设置一个宽度是没有用的display: block（浮动它也可以解决问题）。

Answer 2

示例 HTML：

<div id="container">
    <div class="row">
        <div>
            <label for="firstname">First Name</label>
        </div>
        <div>
            <input type="text" name="firstname" id="firstname"/>
        </div>
    </div>
    <div class="row">
        <div>
            <label for="lastname">Last Name</label>
        </div>
        <div>
            <input type="text" name="lastname" id="firstname"/>
        </div>
    </div>
<div/>

CSS：

.row {
    width: 100%;
}

.row > div:first-child {
    width: 20%;
    float: left;
}

.row > div:last-child {
    float: left;
    width: 80%;
}

jsFiddle： http: //jsfiddle.net/Q4g2u/1/ ​</p>

Answer 3

除了类似宗教的问题外，没有理由在不使用表格标记的情况下格式化表格数据（例如表格）。但如果必须，Luis Sánchez 的回答中描述的技术最接近 - 但它只是在 CSS 中模拟表格，浏览器支持更有限。

Answer 4

您可以使用以下样式：

CSS标记：

.divContainer 
{
    display: table;
}

.divRow  
 {
    display: table-row;
}

.divColumn 
{
    display: table-cell;
}

HTML标记：

<div class="divContainer">
    <div class="divRow">
        <div class="divColumn">
            <label for="firstname">First Name</label>
        </div>
        <div class="divColumn">
            <label for="lastname">Last Name</label>
        </div>
    </div>
</div>