CSS: 右标签在缩放下左浮动

Question

我有一个包含 legend 和 fieldset 的表格，需要在 input 的左侧添加 label。

我只想用 CSS 装饰我的 form label，但是 CSS select 或找不到前面的兄弟姐妹，所以我需要在HTML代码的input之后写label，以便select连接无效input的label，并使用float: left.

当input填写错误时，需要更改相应的label。在以下示例中，标签变为红色，验证失败描述消息展开。

描述 label 需要与相应的输入在同一行（出于美观目的），或者至少左角应与 input 的最右边的点对齐。

当我尝试放大时出现问题。我通过将较低的宽度设置为外部 div.

来模拟这一点

#container {
  width: 200px;
}

form {
  border: 1px solid red;
  overflow: auto;
}

fieldset {}

section {}

input[type="text"] {
  display: inline-block;
}

input[type="text"]+label {
  display: inline-block;
  float: left;
  text-align: right;
  width: 80px;
}

input[type="text"]:invalid+label {
  color: red;
}

input[type="text"]+label+label {
  display: none;
}

input[type="text"]:invalid+label+label {
  display: inline-block;
  color: red;
}

.field-row {
  display: inline-block;
  white-space: nowrap;
}

<div id="container">
  <form>
    <fieldset>
      <legend>Fieldset</legend>
      <section>
        <div>
          <div class="field-row">
            <input id="first" type="text" value="" required />
            <label for="first">First</label>
            <label>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </label>
          </div>
        </div>
        <div>
          <div class="field-row">
            <input id="second" type="text" value="" />
            <label for="second">Second</label>
          </div>
        </div>
      </section>
    </fieldset>
  </form>

在此代码段中，您可以看到第一行非常宽并且超出了外部 fieldset（至少在 Google Chrome 中）。如果我对 fieldset 使用 overflow: auto，legend 文本会在我移动滚动条时向左移动。

当要求input有效时，对应的label转到另一行，但我需要label与连接的input在一条线上。

对我有帮助的技巧是将 field-row 块的 min-width 设置为比 label + input 宽度更宽。但是，这需要知道它们的最大允许宽度，并使用 JavaScript 或在依赖字段的任何 padding、margin 和 width 更改时更改它。

当我不使用 float 时它也能正常工作。虽然，这种方法将需要使用 JavaScript 来更改 label in input 验证状态已更改。

我做了ReactJS申请，所以JavaScript不是问题，但我想尽可能多地研究和使用 CSS 功能。

Answer 1

如果您只需要支持现代浏览器，我建议您放弃尝试为此使用 float 并改用 flexbox。

您需要做的就是制作 .field-row div display: flex; 然后为输入和标签元素设置 order 属性。像这样：

#container {
  width: 200px;
}

form {
  border: 1px solid red;
  overflow: auto;
}

fieldset {}

section {}

input[type="text"] {
  order: 2;
}

input[type="text"]+label {
  text-align: right;
  order: 1;
  width: 80px;
}

input[type="text"]:invalid+label {
  color: red;
}

input[type="text"]+label+label {
  display: none;
  order: 3;
}

input[type="text"]:invalid+label+label {
  color: red;
  display: inline;
}

.field-row {
  display: flex;
  white-space: nowrap;
}

<div id="container">
  <form>
    <fieldset>
      <legend>Fieldset</legend>
      <section>
        <div>
          <div class="field-row">
            <input id="first" type="text" value="" required />
            <label for="first">First</label>
            <label>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </label>
          </div>
        </div>
        <div>
          <div class="field-row">
            <input id="second" type="text" value="" />
            <label for="second">Second</label>
          </div>
        </div>
      </section>
    </fieldset>
  </form>
</div>

CSS: 右标签在缩放下左浮动

CSS: right label with float left wraps under zoom

html

css

forms

word-wrap