css - 设置下边框之后下面内容被挤的靠右了
本文介绍了css - 设置下边框之后下面内容被挤的靠右了的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab选项卡</title>
<style>
*{
padding:0;
margin:0;
list-style:none;
font-size:12px;
}
body{
background-color:#eee;
}
#tabs{
width:300px;
margin:50px auto;
background-color:#fff;
}
#title li{
float:left;
width:60px;
text-align:center;
line-height:30px;
}
#title li.on{
border-bottom:1px solid red;
}
</style>
</head>
<body>
<div id="tabs">
<div id="title">
<ul>
<li class="on">公告</li>
<li>规则</li>
<li>论坛</li>
<li>安全</li>
<li>公益</li>
</ul>
</div>
<div id="content">
<ul>
<li>阿里苏宁发布"新三体"战略 打造未来十年格局</li>
<li>高诚信会员无条件信任 200余万广告商品被处罚</li>
</ul>
</div>
</div>
</body>
</html>
解决方案
你只让title里的li浮动，而ul并没有，因为ul的默认宽度是继承父级元素的宽度而默认高度是子元素的所占高度，所以ul和第一个div的高度都是0，因为你没有设置定位，所有元素都从上自然排列，正常模式下元素边框是向外部扩展的，之所以会从内容会被挤到右边，你这里的下边框就会占用下一行的空间，而带有边框的元素又是float的，所以才会这么显示。啰嗦这么多，根本原因就是因为浮动导致外层元素无法获取高度导致下面的元素加载后到了错误的位置。
#title ul{
overflow: auto;
}在你的样式里面给ul加上浮动属性让它可以获得内部元素的高度就可以正常显示了~
这篇关于css - 设置下边框之后下面内容被挤的靠右了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
