Question

我正在尝试在错误标签elemennt上应用绝对位置，该错误标签也位于绝对定位的输入字段内。问题是错误元素的自动宽度将无法正确应用，并将在第一个单词后中断。为什么会这样？如果我使用位置而不是左，它似乎工作正常。这是一个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

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

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

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

我尽量不使用位置：绝对，除非我......呃绝对必须。

Answer 2

你的位置是从左边90％。这意味着它只有10％的父宽度才能在换行前放置文本。尝试使用

float: right;

而不是

left: 90%;

从左边开始使用自动宽度来处理绝对位置

2 个答案: