html - 水平放置的绝对按钮只是相互叠加

Question

我通过将标签绝对定位在复选框顶部来设置 toogle 按钮。我需要它们水平对齐，但它们只是相互叠加。

<ul style="display: block; float: left;">
        <li style="display: inline-block;">
          <div class="btn_wrapper">
            <input type="checkbox" value="1" id="newest" name=""/>
            <label class="btn btn-sm btn-default" for="newest">Newest</label>
          </div>
        </li>
        <li style="display: inline-block;">
          <div class="btn_wrapper">
            <input type="checkbox" value="1" id="popular" name=""/>
            <label class="btn btn-sm btn-default" for="popular">Popular</label>
          </div>
        </li>
        <li style="display: inline-block;">
          <div class="btn_wrapper">
            <input type="checkbox" value="1" id="price" name=""/>
            <label class="btn btn-sm btn-default" for="price">Price</label>
          </div>
        </li>
      </ul>


ul {
 display: block;
 li {
   display: inline-block
.btn_wrapper {
      position: relative;
      clear: both;

      label {
        display: block;
        cursor: pointer;
        position: absolute;
        top: 5px;
        left: 5px;
        z-index: 1;
        background-color: #CCC;
      }

      input[type=checkbox], input[type=radio] {
        position: absolute;
        top: 5px;
        left: 5px;
      }

      input[type=checkbox]:checked + label {
        color: $shop_color_text_strong;
      }
    }
}
}

这是它的样子:

Answer 1

这就是我最终要做的。基本上在我的输入中添加 display: none 并从标签中删除绝对位置，效果很好。

ul {
      display: block;
      li.filter_btn {
        margin-left: -2px;
      }
      li {
        display: inline-block;
        width: auto;
        height: 30px;
        label {
          display: block;
          cursor: pointer;
          top: 5px;
          left: 5px;
          z-index: 1;
          width: auto;
          background-color: #CCC;
        }

        input[type=checkbox], input[type=radio] {
          display: none;
        }

        input[type=checkbox]:checked + label {
          color: $shop_color_text_strong;
        }
      }
    }