我有一个无序列表，我想显示两列中的文本 block 。该列表将元素分为两列，但我发现间距不一致。因此，右侧列中的元素以我设置的边距一个位于另一个下方，而在左侧列中，两个元素之间出现较大间隙。
我该如何解决这个问题？我的 HTML 在下面。提前致谢。
<html>
<head>test page
<STYLE type="text/css">
.textColumnBox {
padding-top:10px;
float: left;
width: 640px;
padding-bottom: 20px;
}
.moreNews {
padding: 2px 0 5px 0;
width:630px;
display:block;
clear:both;
background-image: url(/images/footer.jpg);
background-repeat: repeat-x;
text-align: right;
-moz-border-radius: 4px;
border-radius: 4px;
}
.newscolumns
{
width: 100%;
overflow: hidden;
vertical-align:top;
}
.newscolumns ul
{
height: 300px;
font-size: 12pt;
vertical-align:top;
margin:2px;
}
.newscolumns ul li
{
padding: inherit;
width: 310px;
display: block;
float: left;
margin-bottom: -4px;
background: red;
vertical-align: top;
}
.newsBox
{
margin-left: 3px;
margin-bottom: 2px;/*changed from 15*/
padding-right: 20px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #4E4629;
}
.newsBox p {
display:block;
font-size: 0.7em;
line-height: 1.2em;
padding-bottom:5px;
}
.newsBox h3 {
line-height: 1.2em;
}
.newsBoxFoot {
display:block;
font-size: 0.7em;
line-height: 1.4em;
color:#999;
}
.newsBox a {
text-decoration:none;
}
.newsBox a:hover {
text-decoration:none;
color:#FFF;
}
</STYLE></head>
<body>
<div class="textColumnBox">
<h1>
Latest News</h1>
<div class="newscolumns">
<ul>
<li>
<div class="newsBox">
<h3>
<a href="#">sample text here qwertyuiowertyuiwertyu</a></h3>
<p>kfdokashfsdhfjhf kjashf kjash fkjsahf saf kjsh fjsakhf kjashf kjsahf kjsahfjksafiksafkashf hsf haskjhf askjhf asjlkh flsakh flskahf lkashf lkashf lksahf lkashf lkashjh as</p>
<div class="newsBoxFoot">20/12/2011 read more</div>
<!-- end .newsBox -->
</div>
</li>
<li>
<div class="newsBox">
<h3>
<a href="#">yasdefghasdfgh sdfgsdfgasdfga dfgsdfgsdf sdfghsdefgh</a></h3>
<p>Pkjhfsdfh skljfhsakjfh asjklhfasljkfh aslkf salkhf laskhf lskahf
lkasflkashfl ksahflk aslfk aslf hsalkf aslkhf laskhf lskahf glksahf
lskahf laskhf lksahf asljkf hsalkhflskahflkh sa</p>
<p>ewreewrewr</p>
<p> </p>
<div class="newsBoxFoot">14/06/2012 read more</div>
<!-- end .newsBox -->
</div>
</li>
<li>
<div class="newsBox">
<h3>
<a href="#">gdfgfdg dfgfdgfgfdgdfg fdgfdgfdgfd gfdgfdgdfdfr</a></h3>
<p>;sdljfs;dlj sd;lfj ds;pl;lsdjg;kdlgkdsflblkjg dlskh gkhkljh kjl.h k.j hgjklsdh g kjdsh g,m hcnxogv;isdhgoiunndkn o;jyhds</p>
<div class="newsBoxFoot">04/04/2012 read more</div>
<!-- end .newsBox -->
</div>
</li>
<li>
<div class="newsBox">
<h3>
<a href="#">dfgfdg dfgdfgdfg fddfg</a></h3>
<p>sd;l;ljd;l sdkjfdskjlsdkjfldksjflsdkjflsdkjf sldkhfdslkhfjkldhf
sdkjhkjh skdjhfkjhkjdhk skdjhkjhkjhoswlhf lkhkljhs kjhkjhkjh
sdklhkjh kh</p>
<div class="newsBoxFoot">14/06/2012 read more</div>
<!-- end .newsBox -->
</div>
</li>
</ul>
</div>
<div class="moreNews">more news</div>
<!-- end .textColumnBox -->
</div>
</body>
</html>
最佳答案
你的 li 宽度是这里的问题。
.textColumnBox {
padding-top:10px;
float: left;
width: 640px;
padding-bottom: 20px;
}
.moreNews {
padding: 2px 0 5px 0;
width:630px;
display:block;
clear:both;
background-image: url(/images/footer.jpg);
background-repeat: repeat-x;
text-align: right;
-moz-border-radius: 4px;
border-radius: 4px;
}
.newscolumns
{
width: 100%;
overflow: hidden;
vertical-align:top;
}
.newscolumns ul
{
height: 300px;
font-size: 12pt;
vertical-align:top;
margin:2px;
}
.newscolumns ul li
{
padding: inherit;
width: 250px;
display: block;
float: left;
margin-bottom: -4px;
background: red;
vertical-align: top;
}
.newsBox
{
margin-left: 3px;
margin-bottom: 2px;
/*changed from 15*/
padding-right: 20px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #4E4629;
}
.newsBox p {
display:block;
font-size: 0.7em;
line-height: 1.2em;
padding-bottom:5px;
}
.newsBox h3 {
line-height: 1.2em;
}
.newsBoxFoot {
display:block;
font-size: 0.7em;
line-height: 1.4em;
color:#999;
}
.newsBox a {
text-decoration:none;
}
.newsBox a:hover {
text-decoration:none;
color:#FFF;
}
<div class="textColumnBox">
<h1>
Latest News
</h1>
<div class="newscolumns">
<ul>
<li>
<div class="newsBox">
<h3>
<a href="#">
sample text here qwertyuiowertyuiwertyu
</a>
</h3>
<p>
kfdokashfsdhfjhf kjashf kjash fkjsahf saf kjsh fjsakhf kjashf kjsahf kjsahfjksafiksafkashf hsf haskjhf askjhf asjlkh flsakh flskahf lkashf lkashf lksahf lkashf lkashjh as
</p>
<div class="newsBoxFoot">
20/12/2011 read more
</div>
<!-- end .newsBox -->
</div>
</li>
<li>
<div class="newsBox">
<h3>
<a href="#">
yasdefghasdfgh sdfgsdfgasdfga dfgsdfgsdf sdfghsdefgh
</a>
</h3>
<p>
Pkjhfsdfh skljfhsakjfh asjklhfasljkfh aslkf salkhf laskhf lskahf
lkasflkashfl ksahflk aslfk aslf hsalkf aslkhf laskhf lskahf glksahf
lskahf laskhf lksahf asljkf hsalkhflskahflkh sa
</p>
<p>
ewreewrewr
</p>
<p>
</p>
<div class="newsBoxFoot">
14/06/2012 read more
</div>
<!-- end .newsBox -->
</div>
</li>
<li>
<div class="newsBox">
<h3>
<a href="#">
gdfgfdg dfgfdgfgfdgdfg fdgfdgfdgfd gfdgfdgdfdfr
</a>
</h3>
<p>
;sdljfs;dlj sd;lfj ds;pl;lsdjg;kdlgkdsflblkjg dlskh gkhkljh kjl.h k.j hgjklsdh g kjdsh g,m hcnxogv;isdhgoiunndkn o;jyhds
</p>
<div class="newsBoxFoot">
04/04/2012 read more
</div>
<!-- end .newsBox -->
</div>
</li>
<li>
<div class="newsBox">
<h3>
<a href="#">
dfgfdg dfgdfgdfg fddfg
</a>
</h3>
<p>
sd;l;ljd;l sdkjfdskjlsdkjfldksjflsdkjflsdkjf sldkhfdslkhfjkldhf
sdkjhkjh skdjhfkjhkjdhk skdjhkjhkjhoswlhf lkhkljhs kjhkjhkjh
sdklhkjh kh
</p>
<div class="newsBoxFoot">
14/06/2012 read more
</div>
<!-- end .newsBox -->
</div>
</li>
</ul>
</div>
<div class="moreNews">
more news
</div>
<!-- end .textColumnBox -->
</div>
关于html - 无序列表布局不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11883146/