CSS: правая метка с плавающими левыми переносами при увеличении

Question

У меня есть форма с legend а также fieldset с, и нужно иметь label с левой стороны input s.

Я хочу стильный мой formlabel только с CSS, но селекторы CSS не могут найти предшествующих братьев и сестер, поэтому мне нужно написать label после input в HTML-коде, чтобы выбрать label с недействительными input и использовать float: left,

когда input заполнен неправильно, необходимо поменять соответствующий ярлык. В следующих примерах метка становится красной, и разворачивается сообщение с описанием ошибки проверки.

Описание 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). Если я использую 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.

Все, что вам нужно сделать, это сделать .field-row ДИВ 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>