橫向CSS佈局

我正在嘗試學習使用「CSS」方式而不是使用表格。我有一個需要像下面這樣被奠定了一個基本形式：橫向CSS佈局

總體而言，三會左對齊，並不會佔用屏幕的整個寬度。但是，下拉列表元素的大小將根據填充它們的數據動態變化。如果我使用的是桌面，我只需要執行以下操作：

<table border='0' cellpadding='0' cellspacing='0'> 
    <tr> 
    <td>Label 1:&nbsp;</td> 
    <td style='padding-right:12px;'><select>...</select></td> 

    <td>Label 2:&nbsp;</td> 
    <td style='padding-right:12px;'><select>...</select></td> 

    <td>Label 3:&nbsp;</td> 
    <td style='padding-right:12px;'><select>...</select></td> 
    </tr> 
</table>

不幸的是，我不確定如何通過CSS來做到這一點。任何見解都值得讚賞。

謝謝！

來源

2013-01-08 YUI Developer

您可以將所有元素放在HTML之後，並給出label元素display:inline-block和margin-left: 50px。

HTML

<label>Label 1 <select>...</select></label> 
<label>Label 2 <select>...</select></label> 
<label>Label 3 <select>...</select></label>

CSS

label { 
display: inline-block; /* perhaps not needed, as commented by cimmanon */ 
margin-left: 50px; 
}

現場演示
http://jsfiddle.net/Ezgtq/1/

來源

2013-01-08 13:18:41 Bazzz

標籤不需要被設置爲'直列block'，他們已經內嵌默認：http://jsfiddle.net/Ezgtq/2/ – cimmanon

''使用'for'屬性來指定它爲哪個元素使用！ –

@cimmanon這也許是真的，我必須說我不確定。我剛添加了'inline-block'，所以應用了'margin-left'（這對內聯元素不起作用）。我同意，沒有'inline-block'的快速測試似乎證明你是對的。 – Bazzz

Label: <select>....</select> 
Label: <select>....</select> 
Label: <select>....</select>

CSS：

select { 
display:inline-block; 
margin-left:12px; 
width:40px; /* What You Want */ 
}

JS Fiddle

來源

2013-01-08 13:19:25

回答

相關問題