列表制作ul,li,相關(guān)問(wèn)題
我想是將列表排一列。
代碼:
<div class="top" >
? ?<div class="top_content">
? ? ? ? <ul class="top_ul">
? ? ? ? <li class="top_content_li">設(shè)為首頁(yè)</li>
? ? ? ? <li class="top_content_li">加入收藏</li>
? ? ? ? <li class="top_content_li">聯(lián)系我們</li>
? ? ? ? </ul>
? ? </div>
</div><!--top結(jié)束-->?
css樣式代碼:
.top_ul{
? ?height:27px;
? ?background:#F00;
}
.top
{width:100%;
?height:27px;
?background:url(../images/top_bg.jpg) repeat-x;
?
}
.top_content
{?
?width:1000px;
?margin:0 auto;
}
.top_content_li?
{ ??
float: right;
list-style-image:url(../li_bg.gif);
width: 70px;
line-height:27px;
}
效果卻是這樣:
2014-12-11
排成一排可以設(shè)置li的樣式display:inline;就能橫向排成一排了
2014-12-11
給li添加個(gè)樣式 float:left 就可以了。