forms - 如何正确地将“箭头”块附加到上面的输入

Question

如您所见，当我的块内的列表只有一行时我是正确的，但是当列表更大时它是错误的。

由于我不能只选择那些后跟错误的输入（请参见此处），因此我当前的解决方案是负边距顶部：

.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

列表标签会自动添加一个空格。要摆脱这种尝试：

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

或者如果您对 HTML5 安全，

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

删除结束标签。

希望这有效。

编辑：删除边距顶部：-1em http://jsfiddle.net/ymSKX/