形式清潔，使用divs或顯示元素：block？

以下示例http://jsfiddle.net/Pg8UY/，最後更正確的是什麼？分行換行或使用display：block，因此表單使用較少的元素來顯示所需的樣式？形式清潔，使用divs或顯示元素：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>

來源

2013-05-07 VSP

您應該使用您更自信的內容。 – Andrew 2013-05-07 09:59:08

我會在這裏發火，但如果你想要輸入的標籤，我建議使用表格。這是讓標籤保持全部相同的非靜態長度的唯一方法。 – Bazzz 2013-05-07 10:03:30

這只是一個建議...我更喜歡使用div，並在其上做風格... – Olrac 2013-05-07 10:09:44

這也工作得很好：

<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-07 09:59:03 Vloxxity

我也想過這個選項，但在我看來，這是理所當然的瀏覽器會做什麼，而不是指定你想要它顯示 – VSP 2013-05-07 11:33:07

第一種方法。 Div作爲塊級元素，它的固有特徵。

來源

2013-05-07 09:59:09 Nitesh

這種風格是正確的。但是，如果你要求在形式上做更少的元素，你可以像下面這樣做。

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

來源

2013-05-07 10:03:32

它不關於做最小的，它關於知道什麼是建議/最佳/好做的方法;），+1的鏈接 – VSP 2013-05-07 11:38:06

我建議你使用..你已經做了什麼。與使用HTML元素，你可以做出非常清晰的CSS和更多的事情是可能比嘗試給外部使用CSS文件。這是很好的做法。 – 2013-05-07 12:59:13

這取決於，但對我來說第二個選擇似乎比第一個更清潔了很多，除了內嵌樣式。閱讀起來比較容易，而且沒有真正的理由使用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-07 10:17:29 haejeong87

關於表單重用+1的好解釋和想法 – VSP 2013-05-07 11:31:38

形式清潔，使用divs或顯示元素：block？

回答

相關問題