使用css設計一行標籤和下拉列表

Question

在一行中設置一堆標籤/下拉列表的方式是什麼樣，但每個下拉列表的上方都有一個標籤。

目前，我有我的HTML

<label for="select1">Label1</label> 
<select id="select1">...<select> 

<label for="select2">Label2</label> 
<select id="select1">...<select> 

<label for="select3">Label3</label> 
<select id="select3">...<select> 

默認情況下，它們都在一排排隊。 如果我申請這個風格

label { 
display:block; 
} 

我得到所有的人都排成一列，在缺乏更好的詞。

那麼，我將如何對它們進行設計，以便在一行中添加一堆標籤/下拉列表，但每個下拉列表中都有一個標籤位於其上方？當然沒有桌子。

謝謝。

Answer 1

更新：精製跨瀏覽器顯示

不太確定你的最終目標是什麼，但如果我正確的解釋，我認爲像this updated fiddle顯示的是你要什麼，使用這種（要求設置明確的width一起工作）：

CSS

label, select { 
    display: inline-block; 
    width: 100px; 
} 

label { 
    position: relative; 
    top: -1.2em; 
    left: 5px; 
} 

select { 
    margin: 1.5em 0 0 -100px; 
} 

多行更新

設置固定寬度的包裝元素like this fiddle以使行包裝。

Answer 2

查看本頁頂部的菜單（問題，標籤，用戶，...）它與無序列表放在一起。

<div class="nav mainnavs"> 
    <ul> 
     <li class="youarehere"><a id="nav-questions" href="/questions">Questions</a></li> 
     <li><a id="nav-tags" href="/tags">Tags</a></li> 
     <li><a id="nav-users" href="/users">Users</a></li> 
     <li><a id="nav-badges" href="/badges">Badges</a></li> 
     <li><a id="nav-unanswered" href="/unanswered">Unanswered</a></li> 
    </ul> 
</div> 

您可以將每個標籤/下拉對粘貼到列表項中。

<li> 
    <label for="select1">Label1</label> 
    <br /> 
    <select id="select1">...<select> 
</li> 

Answer 3

將每個「列表/標籤」組合包裝在塊元素中。然後，您可以浮動該元素具有在同一行上多個項目：

<div class='lst'> 
    <label for="select1">Label1</label> 
    <select id="select1">...<select> 
</div> 

<div class='lst'> 
    <label for="select2">Label2</label> 
    <select id="select1">...<select> 
</div> 

<div class='lst'> 
    <label for="select3">Label3</label> 
    <select id="select3">...<select> 
</div>​ 

div.lst { 
float: left; 
margin: 0 5px 0 5px; 
} 

div.lst label { 
display: block; 
} 

例小提琴：http://jsfiddle.net/Z5hAm/

Answer 4

你可能得組label和select在另一個標籤像p， div或fieldset，然後製作該元素display:inline-block或float:left。

Answer 5

我最終把它們粘在一張桌子上，因爲我有幾個這樣的行，他們都必須排隊。