108

境界線のある2つのdivが隣り合っているとします（https://chrome.google.com/webstore/category/homeを参照してください）。

私のdivが二重の境界線を持っているように見えるのを防ぐ方法（できればCSSトリック）はありますか？私が何を意味するかをよりよく理解するためにこの画像を見てください：

2つのdivが出会う場所で、2つの境界線があるように見えることがわかります。

4

19 に答える 19

94

特定の順序で表示されることが保証されない要素（1つの行に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;
}

アウトラインは古いブラウザ（IE7以前）では機能しないことに注意してください。

または、境界線に固執して負のマージンを使用することもできます。

.collection .child {
    margin-top: -1px;
    margin-left: -1px;
}
于 2012-10-02T15:14:13.530 に答える
25

#divNumberOne { border-right: 0; }

于 2012-10-02T14:21:01.123 に答える
23

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;
}

デモ

IE8 をサポートするために ie9.jsを含めます(すべての CSS セレクター/疑似要素に非常に役立ちます)。

于 2012-10-02T14:27:14.907 に答える
21

考えられる別の解決策は、CSS Adjacent sibling selectorを使用することです。

CSS

div {
    border: 1px solid black;
}

div + div {
    border-left: 0;
}

jsフィドル

于 2014-09-17T00:40:28.423 に答える
5

div がすべて同じクラス名の場合:

div.things {
    border: 1px solid black;
    border-left: none;
}

div.things:first-child {
    border-right: 1px solid black;
}

ここにJSFiddle デモがあります。

于 2012-10-02T14:28:27.013 に答える
2

次のCSSを右側のdivに追加します。

position: relative;
left: -1px; /* your border-width times -1 */

または、境界線の1つを削除します。

于 2012-10-02T14:21:11.857 に答える
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;
}

jsFiddle </p>

于 2012-10-02T14:28:53.907 に答える
0

私はちょうど使用します

border-collapse: collapse;

親要素で

于 2016-09-14T10:37:58.650 に答える
-1

margin:1px;あなたのdivの周りに何かを与えるのはどうですか。

<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>

デモ

于 2012-10-02T14:30:32.410 に答える
-3

私はそれらの後ろにある別のdivを背景として使用し、すべての境界線を削除することを好みます。背景のdivのサイズと前景のdivの位置を計算するだけです。

于 2012-10-02T14:40:58.857 に答える