label以RTL css格式输入对齐

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/