列表制作ul,li,相关问题

来源:-

NDegree

2014-12-10 22:56

我想是将列表排一列。

代码:

<div class="top" >

   <div class="top_content">

        <ul class="top_ul">

        <li class="top_content_li">设为首页</li>

        <li class="top_content_li">加入收藏</li>

        <li class="top_content_li">联系我们</li>

        </ul>

    </div>

</div><!--top结束--> 

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;

}

效果却是这样:54885ee80001678d04980069.jpg



写回答 关注

2回答

  • 偌颜宁
    2014-12-11 10:15:52
    已采纳

    排成一排可以设置li的样式display:inline;就能横向排成一排了

    NDegre...

    非常感谢!谢谢

    2014-12-11 23:11:13

    共 1 条回复 >

  • Tracy_
    2014-12-11 11:41:10

    给li添加个样式 float:left 就可以了。

    NDegre...

    谢谢!非常感谢

    2014-12-11 23:12:15

    共 1 条回复 >

商城分类导航效果

两种方法实现分类导航,同时扩展讲解其它商城分类导航的制作方法

63738 学习 · 276 问题

查看课程

相似问题