Html 使用从左到右的绝对位置获取自动宽度

我试图在一个错误标签element上应用绝对位置，它位于一个输入字段中，该字段也是绝对位置。问题是错误元素上的自动宽度不会正确应用，并且在第一个单词后会中断。为什么会这样？如果我用positionright而不是left，它似乎工作得很好。这里有一个JSFIDLE链接：

以下是HTML代码：

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

---

你把它的位置放在离左边90%的地方。这意味着它只有父宽度的10%可以在换行之前放置文本。试用

float: right;

而不是

left: 90%;

---

为什么有这么多绝对定位的元素？也许我不明白你想要的布局是什么样的——也许你可以澄清一下——但是这个修改过的小提琴在我看来更合理

---

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

您的预期输出是什么……是您想要的吗？为什么不简单地设置

宽度：100%

而不是

自动

？这样，

.error

将根据其容器具有一些“固定”宽度，文本将自动以另一种方式包装。如果我想在#inside div的90%位置启动它，并且我希望它位于外部（而不是包装在#inside div中），该怎么办？您将标签放置在div内部，但希望它位于div的外部？或者您希望错误标签位于#inside div内部，距离#inside div左侧90%，并防止它在到达#inside div最右侧边界时缠绕？是的，我希望它位于#inside外部（当它到达#inside的最右侧边界时防止它缠绕），从#inside div从左侧90%的位置开始。也许我说得不够清楚，但问题是我不希望.error被包装在#inside div中-我希望它从左侧90%的位置伸出。我不认为.error元素可以从其父元素继承宽度，所以width:auto不起作用。有一些方法可以在绝对定位的元素上在其父元素内部而不是外部伪造宽度：auto（左：0，右：0）。如果您决定使用嵌套位置：绝对元素，一个在另一个之外，我认为您要么必须提供静态宽度，要么退回到javascript。

left: 90%;

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