Question

有以下示例http://jsfiddle.net/Pg8UY/，哪个更正确？换行符或使用display：block，以便表单使用较少的元素来显示所需的样式？

<div style="width:300px">
    <div>
        <label>First Name:</label>
    </div>
    <div>
        <input type="text" value="" style="width: 97%" />
    </div>
    <div>
        <label>Second Name:</label>
    </div>
    <div>
        <input type="text" value="" style="width: 97%" />
    </div>

    <div style="margin:10px 0px; text-align:center">Other method:</div>

    <label style="display:block">First Name:</label>
    <input style="display:block; width: 97%" type="text" value="" />
    <label style="display:block">Second Name:</label>
    <input style="display:block; width: 97%" type="text" value="" />
</div>

Answer 1

这种风格是正确的。但是如果你要求在形式上做的元素比你在下面那样做的要少。

 <div style="width:300px">
First Name:<br/>
    <input type="text" value="" style="width: 97%" /><br/>
Second Name:<br/>
<input type="text" value="" style="width: 97%" /><br/>
<div style="margin:10px 0px; text-align:center">Other method:</div>
First Name:<br/>
<input style="display:block; width: 97%" type="text" value="" />
Second Name:<br/>
<input style="display:block; width: 97%" type="text" value="" />
</div>

或者您可以从下面参考。

Best way to layout in HTML forms?

Answer 2

这取决于，但对我来说，除了内联样式之外，第二种选择似乎比第一种更清晰。它更容易阅读，并且没有真正的理由使用div来分隔密切相关的元素（除了更改样式）。

让HTML定义要显示的内容，让CSS定义如何显示它们。它有一个好处。

例如，假设您在两个不同的地方使用相同的表单。在一个地方，所有元素都是直线（水平），而在另一个地方，元素与换行符一起显示。使用CSS，单个模板可用于在两个地方显示表单：

<div class="vertical_form">
<label>First Name:</label>
<input type="text" value="" style="width: 97%" />
<label>Second Name:</label>
<input type="text" value="" style="width: 97%" />
</div>

<div class="horizontal_form">
<label>First Name:</label>
<input type="text" value="" style="width: 97%" />
<label>Second Name:</label>
<input type="text" value="" style="width: 97%" />
</div>

.vertical_form label, .vertical_form input {
  display: block;
}

.horizontal_form label, .horizontal_form input {
  display: inline;
}

Answer 3

这也可行：

<div style="width:300px">
<label>First Name:</label>
<input type="text" value="" style="width: 97%" />
<label>Second Name:</label>
<input type="text" value="" style="width: 97%" />
</div>

http://jsfiddle.net/Vloxxity/Pg8UY/1/

Answer 4

第一种方法。 Div作为块级元素，其固有的特征。

形成清洁度，使用div或元素与display：block？

4 个答案: