javascript - 水平对齐无序列表 HTML

Question

我有一个带有滤镜的屏幕。我正在尝试水平对齐，然后将未排序的列表按列排列，每列 2 个。我试图给他们间距、清晰、显示 block 。我使用的 css 堆叠在一起，但与列不同，所有复选框/链接都彼此相邻。

图片:

HTML 标记:

<div style="clear: both;">
  <div style="display: inline;">
    <div>
      Value Filter
    </div>
    <div>
      <ul style="list-style-type: none;">
        <li style="list-style-type: none;">
          <input type="checkbox" value="All" />All</li>
        <li style="list-style-type: none;">
          <input type="checkbox" value="V1" />V1</li>
        <li style="list-style-type: none;">
          <input type="checkbox" value="V2" />V2</li>
        <li style="list-style-type: none;">
          <input type="checkbox" value="V3" />V3</li>
      </ul>
    </div>
  </div>
  <div style="display: inline;">
    <div>
      Date Filter
    </div>
    <div>
      <ul style="list-style-type: none;">
        <li style="list-style-type: none;"><a href="#">Date 1</a></li>
        <li style="list-style-type: none;"><a href="#">Date 2</a></li>
        <li style="list-style-type: none;"><a href="#">Date 3</a></li>
        <li style="list-style-type: none;"><a href="#">Date 4</a></li>
      </ul>
    </div>
  </div>
  <div style="display: inline;">
    <div>
      Month Filter:
    </div>
    <div>
      <ul style="list-style-type: none;">
        <li style="list-style-type: none;"><a href="#">Month 1</a></li>
        <li style="list-style-type: none;"><a href="#">Month 2</a></li>
        <li style="list-style-type: none;"><a href="#">Month 3</a></li>
        <li style="list-style-type: none;"><a href="#">Month 4</a></li>
      </ul>
    </div>
  </div>
</div>

非常感谢在这方面的任何帮助。

Answer 1

试试这个 DEMO

HTML

<div class="filter">
    <div>
        Value Filter
    </div>
    <div>
        <ul>
            <li style="list-style-type: none;">
                <input type="checkbox" value="All" />All</li>
            <li style="list-style-type: none;">
                <input type="checkbox" value="V1" />V1</li>
            <li style="list-style-type: none;">
                <input type="checkbox" value="V2" />V2</li>
            <li style="list-style-type: none;">
                <input type="checkbox" value="V3" />V3</li>
        </ul>
    </div>
</div>
<div class="filter">
    <div>
        Date Filter
    </div>
    <div>
        <ul>
            <li style="list-style-type: none;"><a href="#">Date 1</a></li>
            <li style="list-style-type: none;"><a href="#">Date 2</a></li>
            <li style="list-style-type: none;"><a href="#">Date 3</a></li>
            <li style="list-style-type: none;"><a href="#">Date 4</a></li>
        </ul>
    </div>
</div>
<div class="filter">
    <div>
        Month Filter:
    </div>
    <div>
        <ul>
            <li style="list-style-type: none;"><a href="#">Month 1</a></li>
            <li style="list-style-type: none;"><a href="#">Month 2</a></li>
            <li style="list-style-type: none;"><a href="#">Month 3</a></li>
            <li style="list-style-type: none;"><a href="#">Month 4</a></li>
        </ul>
    </div>
</div>

CSS

.filter{
    width:33%;
    float:left;
}
.filter ul{
    width:100%;
    display:block;
}
.filter ul li{
     width:50%;
    float:left;
}