如何以底部对齐形式对齐具有多行错误的输入？

Question

我有一个具有底部对齐行为的表单，我需要一行中的所有输入都与底部对齐并在视觉上位于一行。原因是标签可以包含说明，也可以不包含说明。控件可以具有不同的高度和类型（文本输入、选择、单选组、复选框组、字段集）。

我使用

align-self: end;

使控件 div 与底部对齐。当我出现一行错误时它工作正常 但当我出现多行错误时，它看起来不太好。

任何人都可以建议如何使用 CSS 正确对齐控件（也许是网格......）？

期望的结果（右侧输入与左侧输入位于同一行）：

谢谢！

body {
  padding: 50px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

.form {
  display: flex
}

.error {
  color: red;
  padding: 5px 0
}

.form-item {
  border: 5px solid rgb(111, 41, 97);
  display: grid;
  inline-size: 300px;
}

.label {
  background: orange;
}

.control {
  background: #eee;
  padding: 10px;
  /*   display: grid; */
  align-self: end;
}

.input {}

<form class="form">
  <div class="form-item">
    <div class="label">
      <div>Label </div>
      <div style="color: grey">Long instructionsLong instructionsLong instructionsLong instructions Long instructions Long instructionsLong instructionsLong instructionsLong instructions Long instruction </div>
    </div>
    <div class="control">
      <div class="input"><input type="text"></div>
      <div class="error">Long error Long error Long errorLong errorLong errorLong errorLong errorLong errorLong error Long error Long errorLong errorLong errorLong errorLong errorLong er</div>
    </div>
  </div>
  <div class="form-item">
    <div class="label">Label</div>
    <div class="control">
      <div class="input"><input type="text"></div>
      <div class="error">Short error</div>
    </div>
  </div>
</form>

Answer 1

根据您的html，您可以申请

.form-item { grid-template-rows:subgrid; }

。这是一个简单的例子：

body {
  margin: 0;
}

.form {
  display: grid;
  grid-template-columns: repeat(auto-fit, 300px);
}

.error {
  color: red;
  padding: 5px 0
}

.form-item {
  border: 5px solid rgb(111, 41, 97);
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
}

.label {
  background: orange;
}

.control {
  background: #eee;
  padding: 10px;
}

<form class="form">
  <div class="form-item">
    <div class="label">
      <div>Label </div>
      <div style="color: grey">Long instructionsLong instructionsLong instructionsLong instructions Long instructions Long instructionsLong instructionsLong instructionsLong instructions Long instruction </div>
    </div>
    <div class="control">
      <div class="input"><input type="text"></div>
      <div class="error">Long error Long error Long errorLong errorLong </div>
    </div>
  </div>
  <div class="form-item">
    <div class="label">Label</div>
    <div class="control">
      <div class="input"><input type="text"></div>
      <div class="error">Short error</div>
    </div>
  </div>
  <div class="form-item">
    <div class="label">Label</div>
    <div class="control">
      <div class="input"><input type="text"></div>
      <div class="error">errorLong errorLong errorLong errorLong error Long error Long errorLong errorLong errorLong errorLong errorLong er</div>
    </div>
  </div>
</form>

Answer 2

根据布局的其余部分或其他要求，您可以使用 css-grid 来获得所需的布局。

如果删除每个输入和标签周围的 div，则可以只使用沿列方向流动的网格。行的高度将由最大的项目定义，因此也会影响其他控制 div。

.form {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-auto-flow: column;
}

.error {
  color: red;
  padding: 5px 0;
}

.label {
  background: orange;
}

.control {
  background: #eee;
  padding: 10px;
}

 <form class="form">
    <div class="label">
      <div>Label</div>
      <div style="color: grey">
            Long instructionsLong instructionsLong instructionsLong instructions
            Long instructions Long instructionsLong instructionsLong
            instructionsLong instructions Long instruction sjhdjsdhdjshdsj
            hsdjhsdssdhj jshdsjhjsh hjsdhdjsdhjshjdhjdshdjssdhjdhsjdshjsdd
            jhjshdhjdsdhjsdhj
      </div>
    </div>
    <div class="control">
      <div class="input"><input type="text" /></div>
      <div class="error">
            Long error Long error Long errorLong errorLong errorLong errorLong
            errorLong errorLong error Long error Long errorLong errorLong
            jhsdhsjdhsjdh
      </div>
    </div>
    <div class="label">Label</div>
    <div class="control">
      <div class="input"><input type="text" /></div>
      <div class="error">Short error</div>
    </div>
 </form>

Answer 3

您可以使用该网站作为网格助手：了解更多https://cssgrid-generator.netlify.app/

    
    body {
        padding: 50px;
        font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
    }

    .form {
        display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* for more https://cssgrid-generator.netlify.app/ */
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    }
    @media only screen and (max-width: 600px) {
        .form {
    grid-template-columns: repeat(1, 1fr);
        }
    }

    .error {
        color: red;
        padding: 5px 0
    }

    .form-item {
        border: 5px solid rgb(111, 41, 97);
        display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    
    }

    .label {
        background: orange;
    }

    .control {
        background: #eee;
        padding: 10px;
    
    }

    <form class="form ">
        <div class="form-item">
        <div class="label">
            <div>Label </div>
            <div style="color: grey">Long instructionsLong instructionsLong instructionsLong instructions Long instructions Long instructionsLong instructionsLong instructionsLong instructions Long instruction </div>
        </div>
        <div class="control">
            <div class="input"><input type="text"></div>
            <div class="error">Long error Long error Long errorLong errorLong errorLong errorLong errorLong errorLong error Long error Long errorLong errorLong errorLong errorLong errorLong er</div>
        </div>
        </div>
        <div class="form-item">
        <div class="label">Label</div>
        <div class="control">
            <div class="input"><input type="text"></div>
            <div class="error">Short error</div>
        </div>
        </div>
        
    </form>

替代解决方案是：

1. 您可以为文本提供线夹。
2. 对于文本 div：高度：100px；溢出-y：自动；

Answer 4

尝试一下，使用 display flex 代替 grid 作为表单项标签。这应该可以保证您始终使用 html 元素，而无需花费太多精力来更改更新。

body {
  padding: 50px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

.form {
  display: flex;
  width: 60%;
}

.error {
  color: red;
  padding: 5px 0
}

.form-item {
  border: 5px solid rgb(111, 41, 97);
  display: flex;
  flex-direction: column;
  width: 100%;
}

.label {
  background: orange;
  min-height: 45%;
}

.control {
  background: #eee;
  padding: 10px;
  height: 160%;
}

.input {}

<form class="form">
        <div class="form-item">
            <div class="label">
                <div>Label </div>
                <div style="color: grey">Long instructionsLong instructionsLong instructionsLong instructions Long
                    instructions Long instructionsLong instructionsLong instructionsLong instructions Long instruction
                </div>
            </div>
            <div class="control">
                <div class="input"><input type="text"></div>
                <div class="error">Long error Long error Long errorLong errorLong errorLong errorLong errorLong errorLong
                    error Long error Long errorLong errorLong errorLong errorLong errorLong er</div>
            </div>
        </div>
        <div class="form-item">
            <div class="label">Label</div>
            <div class="control">
                <div class="input"><input type="text"></div>
                <div class="error">Short error</div>
            </div>
        </div>
    </form>