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

Question

在下面的示例中，我想使验证消息与输入垂直垂直，以便项目符号点与输入的左侧大致垂直，而不使用显式宽度。

.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>

Answer 1

在这种情况下，我将使用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>

Answer 2

最简单的方法是将flex-wrap: wrap替换为flex-wrap: nowrap。

如果您想将flex-wrap保留为{{1 }}（我不能在评论中问），您可以用应该为wrap的项目制作单独的div。