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

您可以使用以下样式：

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>

Answer 3

示例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/

Answer 4

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

在表单中的样式列

4 个答案: