css中设置line-height而引起的布局问题
代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><sty...
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{list-style: none;padding: 0;margin:0;}
footer{height: 40px;margin-top:10px;}
footer>section{position: fixed;height: 40px;width: 100%;text-align: center;line-height: 40px;bottom: 0px;left: 0px;background-color: #ff7736;z-index: 1;}
footer>section>div{display: inline-block;vertical-align: middle;color:#fff;}
footer>section>div.bar li{height: 6px;line-height: 6px;}
footer>section>div.bar li div:first-child{display: inline-block;border-radius: 50%;height: 2px;width: 2px;content: "";background-color: #fff;margin-right: 4px;vertical-align: baseline;}
footer>section>div.bar li div:last-child{display: inline-block;width: 16px;height: 2px;content: "";background-color: #fff;vertical-align: baseline;}
</style>
</head>
<body>
<footer>
<section>
<div class="bar">
<ul>
<li>
<div></div><div></div>
</li>
<li>
<div></div><div></div>
</li>
<li>
<div></div><div></div>
</li>
</ul>
</div>
<div>更多会场</div>
</section>
</footer>
<script type="text/javascript">
</script>
</body>
</html>
代码中的bar类(class)下li中的两个div设置了display为inline-block，但这两个div并没有在父级的li元素中，而在其底部外，
这是什么原因？？？？？？ 展开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{list-style: none;padding: 0;margin:0;}
footer{height: 40px;margin-top:10px;}
footer>section{position: fixed;height: 40px;width: 100%;text-align: center;line-height: 40px;bottom: 0px;left: 0px;background-color: #ff7736;z-index: 1;}
footer>section>div{display: inline-block;vertical-align: middle;color:#fff;}
footer>section>div.bar li{height: 6px;line-height: 6px;}
footer>section>div.bar li div:first-child{display: inline-block;border-radius: 50%;height: 2px;width: 2px;content: "";background-color: #fff;margin-right: 4px;vertical-align: baseline;}
footer>section>div.bar li div:last-child{display: inline-block;width: 16px;height: 2px;content: "";background-color: #fff;vertical-align: baseline;}
</style>
</head>
<body>
<footer>
<section>
<div class="bar">
<ul>
<li>
<div></div><div></div>
</li>
<li>
<div></div><div></div>
</li>
<li>
<div></div><div></div>
</li>
</ul>
</div>
<div>更多会场</div>
</section>
</footer>
<script type="text/javascript">
</script>
</body>
</html>
代码中的bar类(class)下li中的两个div设置了display为inline-block，但这两个div并没有在父级的li元素中，而在其底部外，
这是什么原因？？？？？？ 展开
1个回答
展开全部
css的最后两行改为：
footer>section>div.bar li div:first-child{display: inline-block;border-radius: 50%;height: 2px;width: 2px;content: "";background-color: #fff;margin-right: 4px;vertical-align: 80%;}
footer>section>div.bar li div:last-child{display: inline-block;width: 16px;height: 2px;content: "";background-color: #fff;vertical-align: 80%;}
footer>section>div.bar li div:first-child{display: inline-block;border-radius: 50%;height: 2px;width: 2px;content: "";background-color: #fff;margin-right: 4px;vertical-align: 80%;}
footer>section>div.bar li div:last-child{display: inline-block;width: 16px;height: 2px;content: "";background-color: #fff;vertical-align: 80%;}
追问
你好，感谢你的回答，但还是有些地方没有想明白，望指教！
我对li下的两个div设置对齐方式为vertical-align为baseline，如果按照css规则的话，子元素的div的基线应该和父元素li的基线对齐啊，父级元素li我设置其基线最小距离值为6px，但子元素显示的位置明显低于父级元素基线的位置，这样不就不符合规则了么？可以帮忙解释下这是什么原因，或者有没有什么博客等文章有写到这方面知识的？
追答
vertical-align是以字符的大小为基准的，也就是说是以当前所在元素的字符的大小来决定哪里是baseline、哪里是middle、哪里是bottom等等，而不是以div或li的高度来决定的，明白没有？所以你这种情况下尽量不要用vertical-align来进行垂直定位（事实上那些大型的专业网站都是很少用到vertical-align的），可以考虑改用浮动（Float）结合margin-top来控制，比如：
ul{list-style: none;padding: 0;margin:0;}
footer{height: 40px;margin-top:10px;}
footer>section{position: fixed;height: 40px;width: 100%;text-align: center;line-height: 40px;bottom: 0px;left: 0px;background-color: #ff7736;z-index: 1;}
footer>section>div{display: inline-block;vertical-align: middle;color:#fff;}
footer>section>div.bar li{height: 6px;line-height: 1px;}
footer>section>div.bar li div{float:left;width:16px;height:2px;background-color: #fff;margin-top:2px}
footer>section>div.bar li div:first-child{border-radius: 50%;width: 2px;margin-right: 4px;}
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
