html - 使自动宽度与从左侧开始的绝对位置一起工作

Question

我正在尝试在错误标签元素上应用绝对位置，该元素位于也绝对定位的输入字段内。问题是错误元素上的自动宽度不会正确应用，并且会在第一个单词后中断。为什么会这样？如果我使用右位置而不是左位置，它似乎工作正常。这是一个 jsfiddle 链接:http://jsfiddle.net/u793ata5/

这是 HTML 代码:

<div id="outside">
    <div id="inside">
        <label class="error">Show this error on the side</label>
    </div>
</div>

和 CSS:

#outside {
    position: relative;
    width: 250px;
    height: 250px;
}

#inside {
    position: absolute;
    top: 30%;
    height: 30px;
    left: 40%;
    width: 80%;
}

.error {
    width: auto;
    position: absolute;
    left: 90%;
    top: 10%;
    background-color: red;
    color: white;
}

Answer 1

为什么有这么多绝对定位元素？也许我不明白您希望布局看起来像什么——也许您可以澄清一下——但这个修改后的 fiddle 对我来说看起来更合理。

http://jsfiddle.net/u793ata5/3/

.error {
     background-color: red;
     display: block;
     margin-left: 50%;
     color: white;
}

我尽量不使用 position: absolute 除非我......呃绝对必须。