標籤以RTL格式輸入對齊

Question

我有RTL格式。但輸入和標籤並不連貫。

HTML：

<div class="searchfield"> 

    <label for="name">name :</label> 
    <input type="text" class="input" name="name" id="name" /> 
</div> 
<div class="searchfield"> 
    <label for="name">last name :</label> 
    <input type="text" class="input" name="name" id="name" /> 
</div> 
<div class="searchfield"> 
    <label for="name">tel :</label> 
    <input type="text" class="input" name="name" id="name" /> 
</div> 
<div class="searchfield"> 
    <label for="name">id :</label> 
    <input type="text" class="input" name="name" id="name" /> 
</div> 

CSS：

.searchfield{margin:10px 20px 0 0;} 
.label { 
    text-shadow: 2px 2px 2px #ccc; 
    display: block; 
    float: right; 
    margin-left:4px; 
    text-align: right; 
    line-height: 22px; 
    } 

input.input { 
    outline:none; 
    border:1px solid rgba(0,0,0, 0.2); 
    width:135px; height:20px; background-color:#fafafa; font-size:11px;} 

在線演示：http://jsfiddle.net/uEKkF/1/

我需要這樣的畫面：

感謝。

Answer 1

有兩個錯誤：

1. 您的標籤選擇器是由.前綴，所以它一直在尋找與班上label，而不是一個label元素的任何元素。
2. 在該元素上沒有明確設置寬度。當塊元素浮動時沒有明確的寬度，它們只擴展其內容的寬度，在這種情況下是可變的。

你可以看到這裏的修復：http://jsfiddle.net/uEKkF/3/