标签以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/