找回密码
当前位置：前端开发者 > CSS > 正文

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

2018-07-23 分类：CSS 阅读(829) 评论(0)

移动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>
<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前端开发技术巡礼

赞(0)
前端开发者 » CSS3 前端开发 消除li之间的边距
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论