Question

我有一个带过滤器的屏幕。我试图水平对齐，并将列中的无序列表排列为2。我试着给它们间距，清晰，显示块。 css我使用堆栈一个在另一个下面但是所有的复选框/链接彼此相邻而不像列。

图片：

enter image description here

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

Answer 2

尝试为外栏float添加div： Demo

.fl{
    float:left;
    margin-left:30px; / * optional for better visibility added space */
}

HTML：

<div class="fl">...    </div>
<div class="fl">...    </div>
<div class="fl">...    </div>

Answer 3

试试这些。请检查此链接https://jsfiddle.net/4xm5gks9/

    <div style="float: left; width: 100%;">
        <div style="width: 20%; float: left;">
            <div>
                Value Filter
            </div>
            <div>
                <ul style="list-style-type: none;">
                    <li style="list-style-type: none;">
                        <input value="All" type="checkbox">All</li>
                    <li style="list-style-type: none;">
                        <input value="V1" type="checkbox">V1</li>
                    <li style="list-style-type: none;">
                        <input value="V2" type="checkbox">V2</li>
                    <li style="list-style-type: none;">
                        <input value="V3" type="checkbox">V3</li>
                </ul>
            </div>
        </div>
        <div style="width: 20%; float: left;">
            <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="width: 20%; float: left;">
            <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>

CSS

div ul{
    float:left;
}

Answer 4

HTML

<div class="filterBlock">
        <h3>Value Filter</h3>
        <ul>
            <li>
                <input type="checkbox" value="All">All
            </li>
            <li>
                <input type="checkbox" value="V1">V1
            </li>
            <li>
                <input type="checkbox" value="V2">V2
            </li>
            <li>
                <input type="checkbox" value="V3">V3
            </li>
        </ul>
    </div>
    <div class="filterBlock">
        <h3>Date Filter</h3>
        <ul>
            <li>
                <a href="#">Date 1</a>
            </li>
            <li>
                <a href="#">Date 2</a>
            </li>
            <li>
                <a href="#">Date 3</a>
            </li>
            <li>
                <a href="#">Date 4</a>
            </li>
        </ul>
    </div>
    <div class="filterBlock">
        <h3>Month Filter</h3>
        <ul>
            <li>
                <a href="#">Month 1</a>
            </li>
            <li>
                <a href="#">Month 2</a>
            </li>
            <li>
                <a href="#">Month 3</a>
            </li>
            <li>
                <a href="#">Month 4</a>
            </li>
        </ul>
    </div>

CSS

       *{
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }
        .filterBlock{
            float: left;
            margin-right: 50px;
        }
        .filterBlock:last-child{
            margin-right: 0;
        }
        .filterBlock ul li{
            margin-bottom: 5px;
            text-align: center;
        }
        .filterBlock ul li input[type="checkbox"]{
            display: inline-block;
        }

水平对齐未排序的列表HTML

4 个答案: