[英]Align un ordered list horizontally HTML
我的屏幕上有过滤器。 我试图将其水平对齐,然后将无序列表按列排列,每列2个。 我试图给他们间距,清晰,显示块。 我使用的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>
在这方面的任何帮助都将受到高度赞赏。
试试这个演示
的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;
}
尝试为外部列div
添加float
: 演示
.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>
试试这些。 检查此链接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;
}
的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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.