今天修改网页无意中遇到的问题
结果就出现莫名其妙的间隔
源码:
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > 无标题文档 </ title >
< style >
/* TAB内容层 */
.show_tabC { display : block ; }
.hidden_tabC { display : none ; }
/* 文字新闻列表 */
.word_ul { list-style-type : none ; padding : 0 ; display : block ; margin-top : 15px ; }
.word_li { display : block ; width : 470px ; height : 24px ; letter-spacing : 0em ; font-size : 13px ; margin-left : 10px ; background-color : #F30 ; }
.word_li span { color : #333 ; float : right ; font-size : 12px ; }
.word_li a { text-decoration : none ; padding-left : 10px ; float : left ; font-size : 13px ; line-height : 24px ; color : #036 }
.word_li a:hover { color : #F00 ; font-size : 13px ; }
</ style >
</ head >
< body >
< div id ="tabC2" class ="show_tabC" >
< ul class ="word_ul" >
< li class ="word_li" >< a href ="[field:arcurl /]" > [field:title /] </ a >< span > [field:pubdate function="MyDate('y-m-d',@me)"/] </ span ></ li >
< li class ="word_li" >< a href ="[field:arcurl /]" > [field:title /] </ a >< span > [field:pubdate function="MyDate('y-m-d',@me)"/] </ span ></ li >
< li class ="word_li" >< a href ="[field:arcurl /]" > [field:title /] </ a >< span > [field:pubdate function="MyDate('y-m-d',@me)"/] </ span ></ li >
< li class ="word_li" >< a href ="[field:arcurl /]" > [field:title /] </ a >< span > [field:pubdate function="MyDate('y-m-d',@me)"/] </ span ></ li >
< li class ="word_li" >< a href ="[field:arcurl /]" > [field:title /] </ a >< span > [field:pubdate function="MyDate('y-m-d',@me)"/] </ span ></ li >
</ ul >
</ div >
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > 无标题文档 </ title >
< style >
/* TAB内容层 */
.show_tabC { display : block ; }
.hidden_tabC { display : none ; }
/* 文字新闻列表 */
.word_ul { list-style-type : none ; padding : 0 ; display : block ; margin-top : 15px ; }
.word_li { display : block ; width : 470px ; height : 24px ; letter-spacing : 0em ; font-size : 13px ; margin-left : 10px ; background-color : #F30 ; }
.word_li span { color : #333 ; float : right ; font-size : 12px ; }
.word_li a { text-decoration : none ; padding-left : 10px ; float : left ; font-size : 13px ; line-height : 24px ; color : #036 }
.word_li a:hover { color : #F00 ; font-size : 13px ; }
</ style >
</ head >
< body >
< div id ="tabC2" class ="show_tabC" >
< ul class ="word_ul" >
< li class ="word_li" >< a href ="[field:arcurl /]" > [field:title /] </ a >< span > [field:pubdate function="MyDate('y-m-d',@me)"/] </ span ></ li >
< li class ="word_li" >< a href ="[field:arcurl /]" > [field:title /] </ a >< span > [field:pubdate function="MyDate('y-m-d',@me)"/] </ span ></ li >
< li class ="word_li" >< a href ="[field:arcurl /]" > [field:title /] </ a >< span > [field:pubdate function="MyDate('y-m-d',@me)"/] </ span ></ li >
< li class ="word_li" >< a href ="[field:arcurl /]" > [field:title /] </ a >< span > [field:pubdate function="MyDate('y-m-d',@me)"/] </ span ></ li >
< li class ="word_li" >< a href ="[field:arcurl /]" > [field:title /] </ a >< span > [field:pubdate function="MyDate('y-m-d',@me)"/] </ span ></ li >
</ ul >
</ div >
</ body >
</ html >
结果就出现莫名其妙的间隔
![](https://i-blog.csdnimg.cn/blog_migrate/d072fa32099a2484acb17d0387865156.jpeg)
解决方法:
在<li>属性中加入vertical-align: bottom;
源码:
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > 无标题文档 </ title >
< style >
/* TAB内容层 */
.show_tabC { display : block ; }
.hidden_tabC { display : none ; }
/* 文字新闻列表 */
.word_ul { list-style-type : none ; padding : 0 ; display : block ; margin-top : 15px ; }
.word_li { display : block ; width : 470px ; height : 24px ; letter-spacing : 0em ; font-size : 13px ; margin-left : 10px ; background-color : #F30 ; vertical-align : bottom ; }
.word_li span { color : #333 ; float : right ; font-size : 12px ; }
.word_li a { text-decoration : none ; padding-left : 10px ; float : left ; font-size : 13px ; line-height : 24px ; color : #036 }
.word_li a:hover { color : #F00 ; font-size : 13px ; }
</ style >
</ head >
< body >
< div id ="tabC2" class ="show_tabC" >
< ul class ="word_ul" >
< li class ="word_li" >< span > [field:pubdate function="MyDate('y-m-d',@me)"/] </ span >< a href ="[field:arcurl /]" > [field:title /] </ a ></ li >
< li class ="word_li" >< span > [field:pubdate function="MyDate('y-m-d',@me)"/] </ span >< a href ="[field:arcurl /]" > [field:title /] </ a ></ li >
< li class ="word_li" >< span > [field:pubdate function="MyDate('y-m-d',@me)"/] </ span >< a href ="[field:arcurl /]" > [field:title /] </ a ></ li >
< li class ="word_li" >< span > [field:pubdate function="MyDate('y-m-d',@me)"/] </ span >< a href ="[field:arcurl /]" > [field:title /] </ a ></ li >
</ ul >
</ div >
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > 无标题文档 </ title >
< style >
/* TAB内容层 */
.show_tabC { display : block ; }
.hidden_tabC { display : none ; }
/* 文字新闻列表 */
.word_ul { list-style-type : none ; padding : 0 ; display : block ; margin-top : 15px ; }
.word_li { display : block ; width : 470px ; height : 24px ; letter-spacing : 0em ; font-size : 13px ; margin-left : 10px ; background-color : #F30 ; vertical-align : bottom ; }
.word_li span { color : #333 ; float : right ; font-size : 12px ; }
.word_li a { text-decoration : none ; padding-left : 10px ; float : left ; font-size : 13px ; line-height : 24px ; color : #036 }
.word_li a:hover { color : #F00 ; font-size : 13px ; }
</ style >
</ head >
< body >
< div id ="tabC2" class ="show_tabC" >
< ul class ="word_ul" >
< li class ="word_li" >< span > [field:pubdate function="MyDate('y-m-d',@me)"/] </ span >< a href ="[field:arcurl /]" > [field:title /] </ a ></ li >
< li class ="word_li" >< span > [field:pubdate function="MyDate('y-m-d',@me)"/] </ span >< a href ="[field:arcurl /]" > [field:title /] </ a ></ li >
< li class ="word_li" >< span > [field:pubdate function="MyDate('y-m-d',@me)"/] </ span >< a href ="[field:arcurl /]" > [field:title /] </ a ></ li >
< li class ="word_li" >< span > [field:pubdate function="MyDate('y-m-d',@me)"/] </ span >< a href ="[field:arcurl /]" > [field:title /] </ a ></ li >
</ ul >
</ div >
</ body >
</ html >