CSS：浮動小数点型の右のラベルは、ズームの下で折り返します

Question

legendとfieldsetのフォームを持ち、inputの左側にlabelを持つ必要があります。

は、私が唯一のCSSと私のformlabel Sをスタイリッシュにしたいが、CSSセレクタは、兄弟の前に見つけることができないので、私は無効input Sに接続label Sを選択するためにHTMLコード内input後labelを記述する必要があり、使用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>

あなたは最初の行が非常に広く、（少なくともGoogle Chromeで）外fieldsetの外に出ることがわかります。 fieldsetにoverflow: autoを使用した場合、スクロールバーを動かすとテキストが左に移動します。

必要inputはlabelは別の行に行く対応し、有効であるが、私は、接続されているinputで1行にするlabelを必要としています。

私を助けたハックは、field-rowブロックのmin-widthを、幅がlabel + inputより広く設定することです。 しかし、これはそれらの最大許容幅を知る必要があり、JavaScriptを使用するか、padding,marginおよびの従属フィールドの変更で変更する必要があります。

floatを使用しないと、うまく動作します。 JavaScriptlabelinputバリデーション状態を変更するには、このアプローチではバリデーション状態が変更される必要があります。

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