0

我有以下表格。如何在没有<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>
4

4 回答 4

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(浮动它也可以解决问题)。

于 2012-05-26T15:42:35.403 回答
0

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

于 2012-05-26T16:05:46.037 回答
0

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

于 2012-05-26T17:10:50.160 回答
0

您可以使用以下样式:

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>
于 2012-05-26T15:46:25.537 回答