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>

更多的参考:
1、http://kissit.blog.51cto.com/6588582/1140572
2、http://blog.sina.com.cn/s/blog_771875550101hv5f.html

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

html百分比实现边框而不挤出相关推荐

html边框粗细设置,如何设置百分比的边框粗细？
边框不支持百分比...但仍有可能... 正如其他人指出的CSS规范,边框不支持百分比: 'border-top-width', 'border-right-width', 'border-bottom ...
HTML边框百分比,CSS：以百分比和边框表示的宽度
使用该box-sizing: border-box属性.它修改了盒子模型的行为,以将填充和边框视为元素总宽度的一部分(但不包括边距).这意味着元素的设置宽度或高度包括为填充和边框设置的尺寸.在您的情况 ...
html给div设置宽度无效,HTML学习之给div高度设置百分比不生效的问题
这几天在学习HTML的知识,今天想做一个极为简单的页面,就是分为头部,内容和底部,本来用三个div即可,可是给div高度设置百分比时发现不生效,具体页面如下,非常简单. 下面是html部分: 1111 ...
HTML-用css样式定义div的边框样式
我们都知道html中div定义的是一个块,有时候我们需要给这个块增加一些边框来达到我们所需要的要求. 1.如何定义边框如下所示我用css定义了这个边框的属性 <style> .c{wid ...
java jpanel边框_JPanel设置边框
JPanel设置边框 2009-03-16 10:36:10 分类: Java public void setBorder(Border border)设置此组件的边框.Border 对象负责定义组件 ...
dw边框弧度设置_笔记整理1 -- HTML基础知识与DW简单使用
笔记整理1 -- HTML基础知识与DW简单使用笔记整理1 -- HTML基础知识与DW简单使用概念客户端和服务器端文件名.基本名.扩展名资源文件和站点什么是HTML 关于W3C W3C的 ...
html中多个div如何使边框重合,嵌套div:我如何获得重叠边框？
Hashem Qolam.. 8 您可以将top/left重置border为0和使用top属性为负值margin-top以实现结果. 实际上,没有必要使用重置边框. 虽然边距会逐字地移动元素. 因此, ...
写好CSS代码的70个专业建议
写好CSS代码的70个专业建议-前端开发博客 CSS 并不总是容易处理. 在你的能力和经验不够的时候,CSS编程会成为一个噩梦,特别是你不确定为页面元素中选择哪种选择器的时候.使用一个不常见的CSS属 ...
写好CSS代码的70个专业建议-前端开发博客
写好CSS代码的70个专业建议-前端开发博客 CSS 并不总是容易处理. 在你的能力和经验不够的时候,CSS编程会成为一个噩梦,特别是你不确定为页面元素中选择哪种选择器的时候.使用一个不常见的CSS属 ...
阿ken的HTML、CSS的学习笔记_CSS盒子模型（笔记五）
走的越远你就越会发现真正能在危难之时拉你一把的人只有你自己前段时间跟家里打视频电话每每看到家人关怀的目光以及她们逐渐苍老的面庞就不忍心再对他们言哭言累有时午夜辗转反侧脑海里一想到他们就会 ...

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

html百分比实现边框而不挤出相关推荐

最新文章

热门文章