CSS：表標籤和文本框

我試圖打破錶柺杖...CSS：表標籤和文本框

我要放置3個「標籤」，「第一」，「中」和「最後」超過3個文本框以便標籤位於相應的文本框上方，並且標籤和文本框垂直對齊。換句話說，我需要一個3列表，其中第一行有3個標籤，第二行有3個文本框，一切都是左對齊的，我希望所有列的寬度都相同並固定。

如何使用僅使用CSS的w/o表格執行此操作？

我知道margin-left會給出組之間的一致距離，但是如何使用段落或break標籤「回車」到下一行wo，因爲所涉及的距離實際上是我想象的字體，而不是能夠「回車」指定數量的像素。

我知道display：block會把東西放在一個新的線上，但是會在前後創建一箇中斷。「我只想休息一下」。

我希望我解釋得很好。

謝謝。

其他編輯：據我所知，也許我不應該避免使用表格來處理表格擅長的事情，但是如果CSS有一個屬性analagos到margin-left：10px，但是在垂直方向執行回車之後，在表格上使用CSS的好處是我的標記中不會有一百萬個TR和TD標記。

有這樣的事嗎？

來源

2010-02-11 ChadD

如果它是表格數據 - 在我看來，這就是你所擁有的 - 爲什麼不使用表格？這就是它的目的！應避免表格佈局，例如一個用於菜單的表格列和另一個用於內容的表格列;但是，當他們合適時，不要過度使用表格！ – GreenMatt 2010-02-11 06:08:31

謝謝，有道理。但是，如果CSS有一個屬性analagos到margin-left：10px，但在執行cariage return之後垂直方向，使用CSS over表的優點是我的標記中沒有一百萬TR和TD標記。有這樣的事嗎？！這是我真正的問題。 – ChadD 2010-02-11 14:41:30

HTML：

<div class="row"> 
    <div class="column"> 
    <label>Left</label> 
    <input name="left" /> 
    </div> 
    <div class="column"> 
    <label>Left</label> 
    <input name="left" /> 
    </div> 
    <div class="column"> 
    <label>Left</label> 
    <input name="left" /> 
    </div> 
</div>

CSS：

.row .column{ 
    width: 200px; 
    float:left; 
} 
.row .column input, 
.row .column label{ 
    display:block; 
}

您現在可以使用CSS樣式的文本框和標籤，所以他們好看。還要注意這個例子與使用表格有多相似，這表明在某些情況下表格不是邪惡的，而是正確的方式。如果你想對齊網格中的東西，請使用表格。

來源

2010-02-11 06:06:39 Marius

你要做的就是創建表單字段是這樣的：

<div id="form"> 
    <div class="control"> 
    <div class="label"> 
     <label for="field1">Field 1</label> 
    </div> 
    <div class="field"> 
     <input type="text" name="field1" id="field1"> 
    </div> 
    </div> 
    ... 
</div>

有：

#form { overflow: hidden; } // this is important! 
#form div.control { float: left; width: 33%; }

現在，如果這些標籤中的一個較大的控件將不排隊，但是這將是一個「純粹」的CSS缺乏表格可以輕鬆自然完成的例子，這引出了一個問題：你爲什麼放棄表格？

注意：沿着同樣的路線的另一個答案建議不包裝標籤和輸入到一個div。這是一個合理的方法，但你失去了一些表達力量。例如，CSS中的一些內容僅適用於塊級元素。例如，你可以改變上面：

#form, div.control { overflow: hidden; width: 600px } // this is important! 
#form div.control { float: left; width: 200px; } 
#form div.control div { float: left; width: 100px; }

，並在左邊，你不能沒有包裝內的div做的相當，以及讓你的標籤。

來源

2010-02-11 06:07:52 cletus

原來，如果你想在輸入字段上生成一個標籤表，那麼表元素就可以使用....如果表元素是最清晰的html代碼，爲什麼不使用它呢？

來源

2010-02-11 06:08:48

CSS：表標籤和文本框

回答

相關問題