[英]CSS border overlap
I am applying a simple style to a complex layout: 我正在将简单的样式应用于复杂的布局:
* {
border: 1px solid #eaeaea;
}
It works but causes all sort of additional borders. 它可以工作,但会导致各种其他边界。 Is there a way to remove or collapse additional borders globally as I do not (nor can I) know what divs or other elements will touch???
有没有一种方法可以全局删除或折叠其他边框,因为我也不(也不知道)div或其他元素会碰到什么???
Is there a jQuery plugin which will apply a simple border to all elements, taking this requirement into consideration? 考虑到这一要求,是否有一个jQuery插件将简单的边框应用于所有元素?
I realize the star is a wildcard that is the effect I am after but I don't want borders to double-up or triple up 我意识到星星是通配符,这是我要追求的效果,但我不希望边框加倍或加倍
When two tandem DIV's have border defined - the center border will be a width of two - I want it to actually overlap so it's rendered as only 1px not 2 px. 当定义了两个串联DIV的边界时-中心边界的宽度为2-我希望它实际上重叠,因此将其渲染为1px而不是2 px。 I cannot know what elements will have this so manually applying the styles or removing the them on a case by case basis is not acceptable.
我不知道什么元素会具有此功能,因此手动接受样式或逐个删除样式是不可接受的。
You could do this : 您可以这样做:
* {
border: 1px solid #eaeaea;
}
.no-border {
border: none;
}
Then, attach the class no-border
to all elements that should not have a border. 然后,将
no-border
类附加到所有不应该具有边框的元素上。
I don't think it's a great idea to set a border for all elements by default, but this technique should give you what you want. 我认为默认情况下为所有元素设置边框不是一个好主意,但是这种技术应该可以为您提供所需的内容。
*
means all, use !important
after your css statement but before the ';' *
表示全部,请在您的css语句之后但在';'之前使用!important
or apply a class to elements you want it to be to and still include the '!important' 或将类应用于您想要的元素,并且仍然包含“!important”
I guess you are looking for avoid elements side by side having the sum of 2 borders, they should collapse instead. 我猜想您在寻找避免元素并排且具有2个边界之和的元素,它们应该改为折叠。
Here is one way you can do to fix that. 这是解决此问题的一种方法。
div { float: left; width: 33%; height: 100px; border: 1px solid black; } div.row1 ~ div.row1 { border-width: 1px 1px 1px 0; } div.row2 { border-width: 0 1px 1px 1px; } div.row2 ~ div.row2 { border-width: 0 1px 1px 0; }
<div class="row1"></div> <div class="row1"></div> <div class="row1"></div> <div class="row2"></div> <div class="row2"></div> <div class="row2"></div>
Collapsing borders also are supported natively by table
's using the property border-collapse: collapse
table
的本机还使用属性border-collapse: collapse
支持折叠边框border-collapse: collapse
.table { display: table; border-collapse: collapse; width: 100%; height: 200px; } .row { display: table-row; } .cell { display: table-cell; border: 1px solid black; }
<div class="table"> <div class="row"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div> <div class="row"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div> </div>
A third way would be to use negative margin 第三种方法是使用负边距
div { float: left; width: 33%; height: 100px; border: 1px solid black; } div.row1 ~ div.row1 { margin-left: -1px; } div.row2 { margin-top: -1px; } div.row2 ~ div.row2 { margin-left: -1px; }
<div class="row1"></div> <div class="row1"></div> <div class="row1"></div> <div class="row2"></div> <div class="row2"></div> <div class="row2"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.