61,112
社区成员
发帖
与我相关
我的任务
分享读精通CSS时的一个小疑问
在6.4 创建简单的水平导航栏这一节
为何要把超链接元素a 定义成块级元素呢？
如果把该定义取消，则效果见下图：
为什么会错落，不水平一致呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navigation</title>
<style type="text/css">
ol.pagination{
margin: 0;
padding: 0;
list-style-type: none;
}
ol.pagination li{
float: left;
margin-right: 0.6em;
}
ol.pagination a,
ol.pagination li.selected{
display: block;
padding: 0.2em 0.5em;
border: 1px solid #ccc;
text-decoration: none;
}
</style>
</head>
<body>
<ol class="pagination">
<li><a href="#" rel="prev">Prev</a></li>
<li><a href="#">1</a></li>
<li class="selected">2</li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" rel="next">Next</a></li>
</ol>
</body>
</html>
为何要把超链接元素a 定义成块级元素呢？
如果把该定义取消，则效果见下图：
为什么会错落，不水平一致呢？
...全文
请发表友善的回复…
发表回复
yuan7644881 2017-11-24
- 打赏
- 举报
你 css 定义就有问题ol.pagination a,ol.pagination li.selected俩个元素就不是同一级的
红枣花生绿豆粥 2017-10-04
- 打赏
- 举报
元素a标签是属于inline行内元素；你如果把dispaly:block;去掉，改变padding的值如：padding: 2em 0.5em;，padding中top对元素a标签没影响；而li.ol.pagination li.selected就会有影响,因为li标签是块级元素，所以就是你说的不对齐。所以要把元素a标签也设为块级元素才可以。希望你能帮到你。
x80819091 2017-10-04
- 打赏
- 举报
有点看不懂，可以详细讲讲吗？不胜感激[/quote]
以前都练过英语单词吧，就那种像五线谱的练习格，j比b会多占一行，inline多的就是那一行，但是如果不是像j这样的英文字母的话，可能只会占到b所用到的行数，比如img
天际的海浪 2017-10-04
- 打赏
- 举报
你主要是一会儿是li元素设置样式，一会儿是a元素设置样式，不统一啊
孟子E章 2017-10-03
- 打赏
- 举报
你是什么浏览器看的？firefox56 ie11 edge都是正常的啊，是页面的其他代码影响的吧？
zwb8848happy 2017-10-01
- 打赏
- 举报
有点看不懂，可以详细讲讲吗？不胜感激
x80819091 2017-09-29
- 打赏
- 举报
如果是inline元素的话，英语a和j,j就会长一点，多的这一块就是为了这个
