html - 漂浮的地方小猫

Question

问题:

我想让小猫在输入后出现。

恐怕输入必须向右浮动，并且无法更改。

此外，HTML 顺序无法更改，因为此标签是在我输入后自动生成并注入(inject)的。

我还想将所有这 3 个元素保留在一行上。

The Live example:

HTML:

<label class="first">Organization : </label>

<input name="organization" id="organization" type="text">

<label class="error" generated="true"><img src="http://placekitten.com/20/30" title="This field is required" ></label>

CSS:

label.first {
    float: left;
    clear: left;
}

input {
    width: 200px;
    float: right;   
}

label.error {
    float: right;
}

Answer 1

更新:每次对固定宽度输入改变主意，

输入上仍然有右边距，然后将小猫放置在空间中 - 需要一个“行”容器 div

Updated Example Here

---

Working Example

.first {
    float: left;
}

input {
    width: 200px;
    float: right;
    margin-right: 25px;    /* enough for kitten */
}

.error {
    float: right;
    right: -230px; /* input width + kitten width + any margin */
    position: relative;
}

我也尝试过 .error div 的边距，但 IE 不喜欢它，但相对定位似乎可以解决问题