Forms 如何正确连接'；箭头所示'；块到上面的输入

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

因为我不能只选择那些后跟错误的输入（请参阅），所以我当前的解决方案是负边际顶部：

.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>Este campo es obligatorio.</li><li>Este campo es obligatorio.</li>

遵守义务。
遵守义务

或者如果你使用HTML5是安全的

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

遵守义务。
埃斯特·坎波是个义务人。

移除结束标记

希望这能奏效

编辑：删除页边距顶部：-1em

---

如果使用

top

属性而不是

margin top

修改

ul.errorlist

的位置，则

li

元素将保持不变，您可以调整

top

像这样：

---

添加另一个列表不会成为第二行吗？@Keith是的，它会，但会使

块向上滑动一点（第一个输入），不确定是否是这种情况，但可能是因为样式
• 的填充为.5，所以每次输入
• 行时，列表会有一点起伏。如果删除空格或html5版本不起作用，只需使用带有所需填充的自动高度div即可显示您的消息。：/抱歉，代码的生成方式与Este campo es obligatio完全相同。
• Este campo es obligatio.
• Este campo es obligatio.。我在帖子中手动更改了它，使其更易于阅读。尝试html5版本，然后完成，它也没有改变任何内容：（.我现在将尝试使用div，将

  高度：auto

  添加到ul将具有相同的效果？如果我将

  显示

  更改为

  块

  ，背景将扩展到整个页面宽度，并且没有负边距，箭头实际上不会触及输入：/您必须根据工作情况设置左边距，ap！）家长式的。知道为什么只有第二个

  li

  在移动块吗？老实说，不知道。这与内联块元素的垂直对齐和高度计算有关，但我没有耐心把它确定下来。我确实学到了比我想知道的更多的关于边界塌陷的知识。哈。

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