问答详情
源自：3-2 编程练习

看效果图做网页

http://img.mukewang.com/557d742e0001235201950328.jpg

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    ul{list-style:none;}
    li{
        line-height:31px;
        border-bottom:1px solid #ccc;
        height:31px;
        font-size:14px;
    }
    div{
        width:150px;
        background:#f8f8f8;
        border:1px solid #bbb;
    }
</style>

</head>
<body>
<div>
    <ul>
        <li>
            <i></i>
        服装内衣
        </li>
        <li>
            <i></i>
        鞋包配饰
        </li><li>
            <i></i>
        运动户外
        </li><li>
            <i></i>
        珠宝手表
        </li><li>
            <i></i>
        手机数码
        </li><li>
            <i></i>
        家电办公
        </li><li>
            <i></i>
        护肤彩妆
        </li><li>
            <i></i>
        母婴用品
        </li>
    </ul>
</div>



</body>
</html>

做出来效果如下：

http://img.mukewang.com/557d74580001f73d02000330.jpg

字前面的横线怎么弄？？？？？？？？？

提问者：站在树端的猫 2015-06-14 20:32

个回答

  • 站在树端的猫
    2015-06-14 20:44:15

    把<ul>标签默认样式清零

    即添加{margin:0；padding:0；}

    同时为<li>添加

    text-align:center；

    margin:0 10px； 

    4