CSS3 前端开发 消除li之间的边距

移动web页面前端开发|mvc web前端开发框架|后端选择前端开发框架

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”utf-8″>
    <title>移动web前端开发屏幕适配</title>
    <style type=”text/css”>
        ul,
        li {
            list-style: none;
            display: inline-block;
            margin: 0;
            padding: 0
        }
        li {
            padding: 0 15px;
            border: 1px solid #ddd;
        }
        li:hover {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href=”javascript:;”>首页</a>
        </li>
        <li>
            <a href=”javascript:;”>今日新单</a>
        </li>
        <li>
            <a href=”javascript:;”>首页</a>
        </li>
        <li>
            <a href=”javascript:;”>今日新单</a>
        </li>
        <li>
            <a href=”javascript:;”>今日新单</a>
        </li>
    </ul>
</body>
</html>

hover上去,可以很明显的看到各个li之间有空隙,不够美观。
设置ul li 的margin、padding为0,并不管用。这并不是由于ul li自带的内外边距值,而是由于编辑器的换行或者空格导致的,
找到最好的一种解决办法就是 ul {font-size:0;}, 但此时必须给li设置font-size。
html 代码

<!DOCTYPE html>
<head>
    <meta charset=”utf-8″>
    <title>酷狗音乐开发用什么前端框架</title>
    <style type=”text/css”>
        ul {
            font-size: 0
        }
        ul,
        li {
            list-style: none;
            display: inline-block;
        }
        li {
            font-size: 20px;
            padding: 0 15px;
            border: 1px solid #ddd;
        }
        li:hover {
            background: pink;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href=”javascript:;”>首页</a>
        </li>
        <li>
            <a href=”javascript:;”>今日新单</a>
        </li>
        <li>
            <a href=”javascript:;”>购物</a>
        </li>
        <li>
            <a href=”javascript:;”>身边外卖</a>
        </li>
        <li>
            <a href=”javascript:;”>名店抢购</a>
        </li>
    </ul>
</body>
</html>

前端开发移动视频播放|爱鲜峰 招聘前端开发|2016前端开发技术巡礼

» 本文来自:前端开发者 » 《CSS3 前端开发 消除li之间的边距》
» 本文链接地址:https://www.rokub.com/4781.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!