Question

我有一个包含legend和fieldset s的表单，需要在label s的左侧显示input。

我想仅使用CSS来设置我的form label，但CSS选择器无法找到前一个兄弟，所以我需要在HTML代码中label之后编写input为了选择与无效label相关联的input，并使用float: left。

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

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

当我尝试放大时会出现问题。我通过将较低宽度设置为外部div来模拟这一点。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

如果需要input有效，则相应的label会转到另一行，但我需要将label放在连接input的一行上。

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

当我不使用float时，它也很有效。虽然，此方法需要使用JavaScript来更改label更改中的更改input。

我制作了ReactJS个应用，因此JavaScript不是问题，但我想尽可能多地调查和使用CSS功能。

Answer 1

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

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

＆＃13;

order

＆＃13;

#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;
}

＆＃13;

CSS：右侧标签，浮动左侧包裹缩放

1 个答案: