如何正確對齊多個標籤 - 文本框對（有和沒有浮動）？

Question

我寫了下面：

<ul> 
    <li> 
     <span class="filter"> 
      <label>Name: </label><input type="text"/> 
     </span> 
    </li> 
    <li> 
     <span class="filter"> 
      <label>Id: </label><input type="text"/> 
     </span> 
    </li> 
</ul>​ 

與CSS爲：

span.filter{ 
    width: 50px; 
} 
input{ 
    text-align: right; 
} 
label{ 
    text-align: left; 
} 
ul{ 
    list-style: none; 
}​ 

但結果是，如圖this小提琴。有人建議使用浮動，但爲什麼這不起作用？

Answer 1

如果你想使用浮點數來達到這種效果，設置您的標籤封鎖，聲明其寬度的顯示屬性，它們漂浮左側。然後將您的輸入和我們清晰地留下：留在標籤元素上，以便它們不會在一行上結束。

這樣：

label{ 
display:block; 
width:50px; /*arbitrarily determined */ 
float:left; 
clear:left; 
} 

input{ 
float:left; 
} 

看到的結果是在這個fiddle。

你也可以做到這一點使用顯示：inline-block的（因此更少的代碼）在孝義的答覆中指出。

另一種方法是使用表格單元格，它（而有些人認爲他們在語義上適當的形式）是不是你通常要依靠佈局的東西。

Answer 2

這是沒有必要使用float。有很多方法，使其工作：

EG。

label{ 
    display: inline-block; 
    width: 200px; 
    text-align: left; 
} 

http://jsfiddle.net/krL7z/7/

Answer 3

如果你是在你知道你是能夠限制你支持的瀏覽器（瀏覽器高於IE7）的情況和所有其它的火狐，Chrome，歌劇，Safari瀏覽器...那麼你可以使用display：table和display：table-cell來以表格方式佈局單元格 - 而不需要實際的表格標記。

span.filter 
{  
    display:table; 
} 
span.filter label, span.filter input 
{  
    display:table-cell; 
}