折疊相鄰元素的垂直邊框？

Question

如何在不刪除border-top/border-bottom的情況下折疊兩個相鄰元素的垂直邊框？

例如：

<style type="text/css">
.bordered {
    border:1px solid #000000;
}
</style>
...
<body>
    <div class="bordered">bordered_1</div>
    <div class="bordered">bordered_2</div>
</body>

我發現的一種方法是添加

margin-top:-1px;
margin-bottom:-1px;

到 .bordered。 但是這樣，如果我更改邊框厚度，我也必須更改 margin-top 和 margin-bottom。 另一種方式是設置：

body {
    display:table;
    border-collapse:collapse;
}
.bordered {
    display:table-row;
    border:1px solid #000000;
}

它似乎具有良好的瀏覽器兼容性（在 IE 9、FF、Chrome 上測試），但它是一種 hacky 代碼。 有沒有更優雅的方式？

Answer 1

對於示例的范圍有限，你可以簡單地指定帶班的元素bordered應該不會有border-top ，如果它是通過與同等級的元素立即之前，使用相鄰的兄弟組合子， + ：

 .bordered { border:1px solid #000000; } .bordered + .bordered { border-top:0 none; }

 <div class="bordered">bordered_1</div> <div class="bordered">bordered_2</div>

折疊相鄰元素的垂直邊框？

問題描述

1 個解決方案

解決方案1
1 2015-02-11 11:10:41

折疊相鄰元素的垂直邊框？

問題描述

1 個解決方案

解決方案1 1 2015-02-11 11:10:41

解決方案1
1 2015-02-11 11:10:41