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

将您的代码更改为：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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