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

Question

如您所见，当我的 block 中的列表只有一行时，我做对了，但当列表更大时，我就错了。

因为我不能只选择那些后面有错误的输入(参见 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>正在移动 block 。我想添加多少就添加多少， block 不再向上滑动。

Answer 1

如果使用 top 属性而不是 margin-top 修改 ul.errorlist 的位置，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;
}