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

将您的代码更改为：

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

Answer 2

标签的默认显示是行内的，复选框和范围的默认显示是行内块。因此，如果您的范围输入进入下一行，则意味着第一行中所有输入的组合宽度大于其父容器的宽度。检查父容器的宽度并将其与输入字段和标签的宽度进行比较。

HTML- 如何让复选框和滑块在同一行

HTML- how to have checkbox and slider on the same line

html

inline