HTML-如何讓複選框和滑塊在同一行上

我有一個文本標籤，一個複選框和一個不透明度滑塊（它用於一個openlayers貼圖），我希望它們在同一行上，默認情況下，重新分開行。HTML-如何讓複選框和滑塊在同一行上

任何想法如何排列起來在同一行？我的代碼是

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

來源

2017-04-21 Bill

爲標籤的默認顯示的是內聯，併爲複選框和範圍是inline-block的。因此，如果您的範圍輸入進入下一行，則意味着第一行中組合的所有輸入的寬度大於其父容器的寬度。檢查父容器的寬度，並將其與輸入字段和標籤的寬度進行比較。

來源

2017-04-21 01:48:17 Pyromonk

這就是答案。我編輯了字段集標籤中的寬度，使其略大一些，並將其適用。乾杯 – Bill

@Bill，我很高興我設法提供幫助。 – Pyromonk

你的代碼更改爲：

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

來源

2017-04-21 01:45:21

HTML-如何讓複選框和滑塊在同一行上

回答

相關問題