HTML-チェックボックスとスライダを同じ行に置く方法

Question

私はテキストラベル、チェックボックス、および不透明度スライダ（openlayersマップ用）を持っていますが、これはデフォルトで同じ行にしたいのですが、別の行に再入力します。

同じ行にそれらを並べるためにどのように任意のアイデア？私のコードは

 <li><span>Parish</span> 
      <fieldset id="layer6" style="border:none"> 
      <label class="checkbox" for="visible6"> 
       <input id="visible6" class="visible" type="checkbox"/> 
      </label> 
      <label></label> 
      <input class="opacity" type="range" min="0" max="1" step="0.01"/> 
      </fieldset> 
     </li> 

Answer 1

。したがって、範囲入力が次の行に行くと、最初の行に結合されたすべての入力の幅が親コンテナの幅よりも大きいことを意味します。親コンテナの幅を確認し、入力フィールドとラベルの幅と比較します。

Answer 2

されるようにコードを変更し

：ラベルのデフォルトの表示は、インラインである、とチェックボックスのために、それはインラインブロックの範囲

<li align="center"><span>Parish</span> 
 
<div align="center"> 
 
      <fieldset id="layer6" style="border:none"> 
 
      <label class="checkbox" for="visible6"> 
 
       <input id="visible6" class="visible" type="checkbox"/> 
 
      </label> 
 
      <label></label> 
 
      <input class="opacity" type="range" min="0" max="1" step="0.01"/> 
 
      </fieldset> 
 
</div> 
 
     </li>