浮动底座

Question

问题：

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

恐怕输入必须正确浮动，这是不能改变的。

另外，HTML命令不能更改，因为这个标签是在输入后自动生成和注入的。

我还想把所有这三个要素保持在同一条线上。

活生生的例子：

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

使用绝对定位..。(如果必须的话)：

Answer 2

更新:每次在固定宽度的输入上改变心意，

在输入上仍然有一个右边框，然后将小猫放在空格中需要一个“行”容器div。

此处更新的示例

工作实例

.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不喜欢它，但是相对定位似乎起作用了。

Answer 3

更改placekitten和输入的顺序。