如何正确地将'arrowed'块附加到上面的输入

Question

正如你所看到的，当我的块中的列表只有一行时，我做对了，但是当列表更大时，它是错误的。

由于我不能只选择那些输入后跟错误（见here），我目前的解决方案是负边缘 -

.errorlist {
    display: inline-block;
    position: relative;
    margin-left: 1em;
    margin-top: -1em;
    max-width: 30em;
    min-width: 10em;
    border-radius: 4px;
}
/* Arrow: */
.errorlist:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: 10px;
    bottom: 100%;
    border-color: transparent transparent rgb(205, 10, 10) transparent;
    border-style: solid;
    border-width: 10px;
}
.errorlist li {
    margin: 0;
    padding: 0.5em;
}

相关HTML：

<div class="required">
     <p>
         <label for="id_username">Nombre de usuario:</label> 
         <input type="text" name="username" maxlength="30" id="id_username">
     </p>
     <ul class="errorlist ui-state-error">
         <li>Este campo es obligatorio.</li>
         <li>Este campo es obligatorio.</li>
     </ul>
</div>

编辑：我注意到只有第二个<li>正在移动块。我可以添加任意数量的块，并且块不会再向上滑动。

Answer 1

如果您使用ul.errorlist属性而非top修改margin-top的位置，li元素将保持不变，您可以调整top }

像这样：http://jsfiddle.net/bqxdj/

.errorlist {
    display: inline-block;
    position: relative;
    margin-left: 1em;
    top: -1.5em;
    max-width: 30em;
    min-width: 10em;
    border-radius: 4px;
}

Answer 2

list标签会自动添加空格。 要摆脱这个尝试：

     <li>Este campo es obligatorio.</li><li>Este campo es obligatorio.</li>

或者如果您对HTML5安全，

     <li>Este campo es obligatorio.
     <li>Este campo es obligatorio.

删除结束标记。

希望这有效。

编辑：删除margin-top：-1em http://jsfiddle.net/ymSKX/