水平对齐无序列表HTML

Question

I have a screen with filters on it. I am trying to align then horizontally and arrange the un-ordered list in columns for 2 each. I tried to give them spacing, clear, display block. The css i used stacks one below another but has all checkboxes/links next to each other unlike columns.

Image:

HTML Markup:

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

Any help in this regard is highly appreciated.

Answer 1

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

Try adding float for outer column div 's: 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

Try these. Check this link 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;
        }