0
我有一個無序列表，我想顯示兩列中列出的文本塊。該列表列出了兩列中的項目，但我發現間距不一致。因此，右欄中的項目與我設定的頁邊距一個在另一個的下方，而在左欄中，兩個項目之間出現較大的間隙。無序列表不正確排列
我該如何解決這個問題？我的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>
我試過所有的CSS調整，人們發送，它似乎沒有工作（但感謝那些誰迴應）。我想我將不得不求助於一張桌子！ :( – Shaggy 2012-08-15 15:43:18