html百分比实现边框而不挤出

转载于 2017-10-11 21:39:00 发布 · 187 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xin-yu/p/7653002.html

文章标签：

这是两个层，每个占了50%的宽。
假如我们想给它加上个黑色边框，那么效果是这样子的。

很明显，第二个层因为border的原因被挤到了下一层。
那么如何给满宽度的元素设置边框而被挤出呢？
可以给它加上box-sizing:border-box;
最终的效果

源代码如下：

<html>
    <head>
        <style>
            *{margin:0px;padding:0px;}
            ul li{width:50%;float:left;height:100px;list-style: none;text-align:center;
                color:#fff;line-height:94px;box-sizing:border-box;border:3px solid #000;}
        </style>
    </head>
    <body>
        <ul>
            <li style="background:#03A9F4;">层1</li>
            <li style="background:#3F51B5;">层2</li>
        </ul>
    </body>
</html>

转载于:https://www.cnblogs.com/xin-yu/p/7653002.html