Question

我试图学习做什么＆＃34; CSS＆＃34;方式而不是使用表格。我有一个基本形式，需要像下面那样布局：

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 Fiddle

水平CSS布局

2 个答案: