html - 无序列表布局不正确

Question

我有一个无序列表，我想在两列中显示文本块。该列表在两列中列出了项目，但我发现间距不一致。因此，右侧栏中的项目在我设置的边距下位于另一个下方，而在左侧栏中，两个项目之间出现了很大的间隙。

我怎样才能解决这个问题？我的 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&nbsp; sa</p>
        <p>ewreewrewr</p>
        <p>&nbsp;</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>

score 1 · Accepted Answer

您的 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&nbsp; sa
              </p>
              <p>
                ewreewrewr
              </p>
              <p>
                &nbsp;
              </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>

score 0 · Accepted Answer

我没有看到两列。只是“最新消息”，它的下方是一个带有一些文字的大红色框，但其中的每一行都有不同的行。

score 0 · Accepted Answer

我希望你看起来像这样：- http://tinkerbin.com/WekcnbhE

HTML

<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&nbsp; sa</p>
        <p>ewreewrewr</p>
        <p>&nbsp;</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>

CSS

.textColumnBox {

float: left;
width: 640px;

}
.moreNews {

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;
background:red;
}

.newscolumns ul
{
font-size: 12pt; 
  margin:0;
    padding:0;
}

 .newscolumns ul li
{

 width: 270px;
 float: left;
list-style-type: none;
margin:0px 20px;
  padding:0;

 }
.newscolumns ul li:nth-child(odd)
{


  border-right:1px solid black;
 }

.newsBox p {
display:block;
font-size: 0.7em;
line-height: 1.2em;

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

score 0 · Accepted Answer

I think now i change some codings, now u try it


<html>
<head>test page
 <STYLE type="text/css">
 .textColumnBox {
padding-top:10px;

margin:0px auto;
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;
 padding:0px;

}

 .newscolumns ul li
{
 padding: inherit;
 width: 310px;
 display: block;
 float: left;
 margin-bottom: 5px;
 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;
}
p
{
    margin:0px;
}
 </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 style="float:right;" >
    <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&nbsp; sa</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 style="float:right;">
        <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>

html - 无序列表布局不正确

4 回答 4

Related

Reference