0

有以下示例http://jsfiddle.net/Pg8UY/，更正确的是什么？用于换行的 Divs 或使用 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>
4

4 回答 4

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>

或者你可以从下面参考。

在 HTML 表单中布局的最佳方式？

于 2013-05-07T10:03:32.710 回答
1

这取决于，但对我来说，第二个选择似乎比第一个更干净，除了内联样式。它更易于阅读，并且没有真正的理由使用 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;
}
于 2013-05-07T10:17:29.143 回答
0

这也可以正常工作：

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

于 2013-05-07T09:59:03.180 回答
0

第一种方法。div作为块级元素，其固有特性。

于 2013-05-07T09:59:09.777 回答