设置下边框之后下面内容被挤的靠右了

发布于
2017-06-25

图片描述

<!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>

html css

阅读 4.6k

3 个回答

得票最新

SiroSong

282

发布于
2017-06-25

✓ 已被采纳

你只让title里的li浮动，而ul并没有，因为ul的默认宽度是继承父级元素的宽度而默认高度是子元素的所占高度，所以ul和第一个div的高度都是0，因为你没有设置定位，所有元素都从上自然排列，正常模式下元素边框是向外部扩展的，之所以会从内容会被挤到右边，你这里的下边框就会占用下一行的空间，而带有边框的元素又是float的，所以才会这么显示。啰嗦这么多，根本原因就是因为浮动导致外层元素无法获取高度导致下面的元素加载后到了错误的位置。

        #title ul{
            overflow: auto;
        }

在你的样式里面给ul加上浮动属性让它可以获得内部元素的高度就可以正常显示了~

CRIMX

9.1k2720

发布于
2017-06-25

给 ul 清除浮动，具体各种方法可搜索。

吃肉吃肉

24136

发布于
2017-06-25

加了border-bottom后，使得该li的高度大于旁边li元素的高度了，再加上浮动没有清除，自然后面的文字就成环绕效果了

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

设置下边框之后下面内容被挤的靠右了

你尚未登录，登录后可以

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

图片沿着圆环的转动有什么方法吗？

flex相关 flex: 1的子元素如何宽度能100%且不溢出？

CSS如何巧妙实现标题居中、关闭按钮居右效果？

js阻止冒泡问题？

Scss的rgba()方法无法对变量进行二次编译？