假设我有两个相邻的div(以https://chrome.google.com/webstore/category/home为参考)并带有边框。
有没有办法(最好是CSS技巧)来阻止我的div出现像双边框?看看这张图片,以便更好地理解我的意思:
你可以看到两个div相遇的地方,看起来它们有一个双边框。
答案 0 :(得分:51)
如果我们谈论的元素不能保证以任何特定的顺序出现(可能是一行中有3个元素,后面跟一个有2个元素的行等),你想要的东西可以放在每个元素上在集合中。该解决方案应涵盖:
.collection {
/* these styles are optional here, you might not need/want them */
margin-top: -1px;
margin-left: -1px;
}
.collection .child {
outline: 1px solid; /* use instead of border */
margin-top: 1px;
margin-left: 1px;
}
请注意,大纲不起作用in older browsers(IE7及更早版本)。
或者,您可以坚持使用边框并使用负边距:
.collection .child {
margin-top: -1px;
margin-left: -1px;
}
答案 1 :(得分:18)
HTML:
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
CSS:
div {
border: 1px solid #000;
float: left;
}
div:nth-child(n+2) {
margin-left: -1px;
}
<强> Demo 强>
包含ie9.js以支持IE8(它对所有CSS选择器/伪元素非常有用)。
答案 2 :(得分:15)
#divNumberOne { border-right: 0; }
答案 3 :(得分:11)
可以考虑的另一个解决方案是使用CSS Adjacent sibling selector。
div {
border: 1px solid black;
}
div + div {
border-left: 0;
}
答案 4 :(得分:4)
如果div都具有相同的类名:
div.things {
border: 1px solid black;
border-left: none;
}
div.things:first-child {
border-right: 1px solid black;
}
这里有JSFiddle demo。
答案 5 :(得分:4)
您可以使用奇数选择器来实现此
.child{
width:50%;
float:left;
box-sizing:border-box;
text-align:center;
padding:10px;
border:1px solid black;
border-bottom:none;
}
.child:nth-child(odd){
border-right:none;
}
.child:nth-last-child(2),
.child:nth-last-child(2) ~ .child{
border-bottom:1px solid black
}
<div>
<div class="child" >1</div>
<div class="child" >2</div>
<div class="child" >3</div>
<div class="child" >4</div>
<div class="child" >5</div>
<div class="child" >6</div>
<div class="child" >7</div>
<div class="child" >8</div>
</div>
答案 6 :(得分:1)
我只是用
asDays()
在父元素
中答案 7 :(得分:1)
如果您还需要在交互中更改边框颜色(例如表单中的色板选择器),我发现了一个很好的技巧,使用负边距、填充调整和变换转换的组合。看看:
.parent{
display: flex;
width: 100%;
max-width: 375px;
margin-left:1px;
}
.child {
margin-left: -1px;/* hide double borders behind their siblings */
flex: 1 0 auto;
}
.child input {
display:none
}
.child label {
display:block;
border: 1px solid #eaeaea;
min-height: 45px;
line-height: 45px;
cursor: pointer;
padding: 0 10px; /* will be changed when input is checked */
font-size: 15px;
text-align: center;
}
.child input:checked+label {
border: 1px solid red;
transform: translateX(-1px);
padding-left: 11px;
padding-right: 9px;
background-color: #fafafa;
}
<div class="parent">
<div class="child">
<input id="swatch-1" type="radio" value="1" name="option" checked="true">
<label for="swatch-1">Element 1</label>
</div>
<div class="child">
<input id="swatch-2" type="radio" value="2" name="option">
<label for="swatch-2">Element 2</label>
</div>
<div class="child">
<input id="swatch-3" type="radio" value="3" name="option">
<label for="swatch-3">Element 3</label>
</div>
</div>
答案 8 :(得分:1)
将以下CSS添加到右侧的div:
position: relative;
left: -1px; /* your border-width times -1 */
或者只删除其中一个边框。
答案 9 :(得分:0)
我的用例是单行中的方框,我知道最后一个元素是什么。
.boxes {
border: solid 1px black // this could be whatever border you need
border-right: none;
}
.furthest-right-box {
border-right: solid 1px black !important;
}
答案 10 :(得分:0)
我知道这是一个迟到的反应,但我只是想放弃我的2美分,因为我的做法不在这里。
你知道,我真的不喜欢玩边距,尤其是负边距。每个浏览器似乎处理这些只是有点不同,边缘很容易受到很多情况的影响。
我确保自己有一个漂亮的div表,是首先创建一个好的html结构,然后应用css。
我如何做的示例:
<div class="tableWrap">
<div class="tableRow tableHeaders">
<div class="tableCell first">header1</div>
<div class="tableCell">header2</div>
<div class="tableCell">header3</div>
<div class="tableCell last">header4</div>
</div>
<div class="tableRow">
<div class="tableCell first">stuff</div>
<div class="tableCell">stuff</div>
<div class="tableCell">stuff</div>
<div class="tableCell last">stuff</div>
</div>
</div>
现在,对于css,我只是使用行结构来确保边界只是它们需要的位置,不会产生边距;
.tableWrap {
display: table;
}
.tableRow {
display: table-row;
}
.tableWrap .tableRow:first-child .tableCell {
border-top: 1px solid #777777;
}
.tableCell {
display: table-cell;
border: 1px solid #777777;
border-left: 0;
border-top: 0;
padding: 5px;
}
.tableRow .tableCell:first-child {
border-left: 1px solid #777777;
}
Et瞧,一张完美的桌子。 现在,显然这会导致你的DIV在宽度上有1px的差异(特别是第一个),但对我来说,这从来没有创造任何类型的任何问题。如果它在你的情况下,我猜你当然会更依赖于边距。
答案 11 :(得分:0)
<div class="one"></div>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
CSS:
.one{
width:100px;
height:100px;
border:thin red solid;
float:left;
}
.two{
width:100px;
height:100px;
border-style: solid solid solid none;
border-color:red;
border-width:1px;
float:left;
}
答案 12 :(得分:0)
使用Flexbox,有必要添加第二个子容器,以使轮廓正确重叠...
<div class="grid__container">
<div class="grid__item">
<div class="grid__item-outline">
<!-- content -->
</div>
</div>
</div>
SCSS
.grid__container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 1px 0 0; // margin-right 1px to give the correct width to the container
}
.grid__item {
flex: 0 1 25%; // grid of 4
margin: 0 0 1px; // margin-bottom to prevent double lines
}
.grid__item-outline {
margin: 0 0 0 1px; // margin-left to prevent double lines
outline: 1px solid #dedede;
}
答案 13 :(得分:0)
我来晚了,但是尝试使用outline属性,就像这样:
.item {
outline: 1px solid black;
}
CSS中的轮廓不会占用物理空间,因此会重叠以防止出现双重边框。
答案 14 :(得分:0)
我能够使用以下代码实现它:
td.highlight {
outline: 1px solid yellow !important;
box-shadow: inset 0px 0px 0px 3px yellow;
border-bottom: 1px solid transparent !important;
}
答案 15 :(得分:0)
一个非常老的问题,但这是google的第一个结果,因此对于遇到此问题并且不想进行媒体查询的人,将边框重新添加到移动设备等元素的左右。
我使用的解决方案是:
.element {
border: 1px solid black;
box-shadow: 0 0 0 1px black;
}
之所以可行,是因为在由边框和阴影组成的元素周围会看到2px的边框。但是,在元素相遇的地方,阴影重叠,使阴影保持2px宽;
答案 16 :(得分:-1)
在你的div周围给margin:1px;
怎么样。
<html>
<style>
.brd{width:100px;height:100px;background:#c0c0c0;border:1px solid red;float:left;margin:1px;}
</style>
<body>
<div class="brd"></div>
<div class="brd"></div>
<div class="brd"></div>
</body>
</html>
<强> DEMO 强>
答案 17 :(得分:-3)
我更喜欢在它们后面使用另一个div作为背景并删除所有边框。您只需要计算背景div的大小和前景div的位置。