列表复选框水平显示

Question

我有以下标记: -

<div class="fil hori now">
  <span class="label-new">
    <ul class="ngc">
      <li>
        <input class="any" id="any" name="any" type="checkbox"> 
        <label id="any" for="any">Any</label>
      </li>

      <li class="new-select">
        <input id="item1" name="item1" type="checkbox">
        <label id="item1" for="item1">item1</label>
      </li>

      <li class="new-select">
        <input id="item2" name="item2" type="checkbox">
        <label id="item2" for="item2">item2</label>
      </li>

      <li class="new-select">
        <input id="item3" name="item3" type="checkbox">
        <label id="item3" for="item3">item3</label>
      </li>
    </ul>

  </span>
</div>

我如何使项目列表水平,但如果我有新项目,他们只是以特定宽度而不是一行进入下一行？

Answer 1

首先,你的加价是完全错误的!

1. 你不能在<ul>里面<span>.
2. 你只能<li>在里面<ul>.

要回答您的问题,这只是一个简单的CSS修复:

.new-select {
  display: inline-block;
}