css - 水平 CSS 布局

Question

我正在尝试学习以“CSS”方式而不是使用表格来做事。我有一个基本表格，需要按如下方式布置：

Label 1: [Drop Down List]     Label 2: [Drop Down List]   Label 3: Drop Down List

总的来说，这三个将左对齐，而不是占据屏幕的整个宽度。但是，下拉列表元素的大小将根据填充它们的数据而动态变化。如果我使用的是表格，我会执行以下操作：

<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 做到这一点。任何见解都值得赞赏。

谢谢！

Answer 1

您可以在 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/

Answer 2

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

CSS：

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

JS小提琴