获取错误标签以与flex-wrap中的输入对齐

Posted 2021-03-27

在下面的示例中，我想将验证消息与输入垂直对齐，这样子弹点大致与输入的左侧内联，而不使用显式宽度。

.form-control__input {
  display: flex
}

.form-control__input.form-control__vertical {
  flex-direction: column;
  justify-content: flex-start
}

.form-control__input.form-control__horizontal {
  flex: 1 1;
  flex-wrap: wrap;
  align-items: center
}

.form-control__input.form-control__horizontal .form-control__wrapper {
  flex: 1 1
}

.form-control__input.form-control__horizontal [role=alert] {
  width: 100%
}

<div class="form-control__input form-control__horizontal"><label for="ctrl5" id="ctrl5-label" class="label__default">Horizontal</label>
  <div class="form-control__wrapper"><input autocomplete="off" class="input__default form-control input__invalid" id="ctrl5" aria-invalid="true" aria-describedby="ctrl5-error" maxlength="100" type="text"></div>
  <div id="ctrl5-error" aria-hidden="false" role="alert">
    <ul class="current-errors error-label__container">
      <li data-selector="form-error">foo bar</li>
    </ul>
  </div>
</div>

答案

在这种情况下，我会使用display: grid而不是display: flex，所以你可以像桌子一样排列元素。

您可以为每个div指定区域名称，并将每个区域定位在父级的grid-template-area属性中

.form-control__input.form-control__vertical {
  flex-direction: column;
  justify-content: flex-start
}

.form-control__input .label_default {
      grid-area: label;
}

.form-control__input.form-control__horizontal {
  display: grid;
    grid-template-areas: "label input" ". error";
    grid-template-columns: min-content;
}

.form-control__input.form-control__horizontal .form-control__wrapper {
  grid-area: input;
}

.form-control__input.form-control__horizontal [role=alert] {
  grid-area: error;
}

.form-control__input.form-control__horizontal [role=alert]  ul {
  list-style-position: inside;
    padding-left: 0;
}

<div class="form-control__input form-control__horizontal"><label for="ctrl5" id="ctrl5-label" class="label__default">Horizontal</label>
  <div class="form-control__wrapper"><input autocomplete="off" class="input__default form-control input__invalid" id="ctrl5" aria-invalid="true" aria-describedby="ctrl5-error" maxlength="100" type="text"></div>
  <div id="ctrl5-error" aria-hidden="false" role="alert">
    <ul class="current-errors error-label__container">
      <li data-selector="form-error">foo bar</li>
    </ul>
  </div>
</div>

另一答案

实现这一目标的最简单方法是用flex-wrap: wrap替换flex-wrap: nowrap。 如果你想保持flex-wrap到wrap（我在评论中不能问）你可以制作一个单独的div与应该是wrapped的项目。

以上是关于获取错误标签以与flex-wrap中的输入对齐的主要内容，如果未能解决你的问题，请参考以下文章

在输入旁边对齐表单中的标签

将字段标签的基线与文本输入中的文本基线对齐

在文本输入下方对齐标签

具有多行标签的窗体中的垂直对齐（水平放置标签-输入）

VBA，向上/向下填充行以与最后一行对齐

Bootstrap - 输入组插件标签宽度对齐