最後の要素が動かないようにする方法は？

Question

おそらくばかげた質問ですが、CSSが私の最高の面ではないので、私はこれを理解できません。 私は2番目の建設ました：ツールチップ（そのOK、それはページサイズの変更の場合はサイズを変更する必要があります）

.span-chb { 
    height: 22px; 
    display:inline-block 
} 

div要素のサイズが変更されたときに私の問題がある：彼らが一列に配置されている

<div> 
    <span class="span-chb"> 
    <input type="checkbox" id="special-chb" name="special-exist"> 
    <label for="special-chb">Special exist, bla bla bla...</label> 
    <span class="tooltip"> 
     <span>tooltip-text</span> 
    </span> 
    </span> 
</div> 

をスパンが新しい行にジャンプしています。 divをもっと小さくすると、ラベルのテキストは動いていますが、要素自体はそのままの状態にとどまります。

私が達成しようとしているのは、ツールチップを移動したりどこにでも入力することですが、ラベルテキストを新しい行に移動させることができます。私が欲しいと思ったのは、white-space: nowrap;をspan-chbに加えることですが、ラベルテキストがジャンプするのを防ぐことができます（基本的に幅が変わってサイズが変わる）。 white-space: normal;をラベルに追加すると、最後のラベル行にツールヒントスパンの配置が終わると問題が追加されます。

この問題を解決するにはどうすればよいですか？

Answer 1

私はdisplay:tableがこれを解決するのに役立つと信じています。

には、以下のCSSを使用してみてください：

.span-chb { 
    height: 22px; 
    display: table; 
} 
.span-chb * { 
    display: table-cell; 
    vertical-align: middle; 
} 
.tooltip { 
    white-space: nowrap; 
} 

Answer 2

表は役立つかもしれません。

.span-chb { 
 
    height: 22px; 
 
    display:inline-block 
 
}

<div> 
 
    <span class="span-chb"> 
 
    
 
    
 
    <table style="width:100%"> 
 
     <tr> 
 
     <th> 
 
      <input type="checkbox" id="special-chb" name="special-exist"> 
 
      <label for="special-chb">Special exist, bla bla bla...</label> 
 
      </th> 
 
     <td> 
 
      <span class="tooltip"> 
 
      <span>tooltip-text</span> 
 
      </span></td> 
 
     </tr> 
 
     </table> 
 
    </span> 
 
</div>