Предотвращение «двойных» границ в CSS

Question 1

Скажем, у меня есть два блока div рядом друг с другом (возьмите https://chrome.google.com/webstore/category/home в качестве ссылки) с рамкой.

Есть ли способ (желательно трюк с CSS), чтобы мои div не выглядели как двойные границы? Взгляните на это изображение, чтобы лучше понять, что я имею в виду:

«Двойная» граница

Вы можете видеть, что там, где встречаются два div, кажется, что у них есть двойная граница.

Question 2

#divNumberOne { border-right: 0; }

Question 3

Если мы говорим об элементах, появление которых не может быть гарантировано в каком-либо определенном порядке (может быть, 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;
}

Question 4

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

Демо

Включите ie9.js для поддержки IE8 (это очень полезно для всех селекторов / псевдоэлементов CSS).

Question 5

Еще одно решение, которое можно было бы рассмотреть, - это использовать селектор соседних элементов CSS .

CSS

div {
    border: 1px solid black;
}

div + div {
    border-left: 0;
}

jsFiddle

Question 6

Вы можете использовать нечетный селектор для достижения этого

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

Развернуть фрагмент

Question 7

Если все div имеют одинаковое имя класса:

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

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

Здесь есть демонстрация JSFiddle .

Question 8

Я опаздываю на шоу, но попробуйте использовать свойство контура, например:

.item {
  outline: 1px solid black;
}

Контуры в CSS не занимают физического пространства и поэтому будут перекрываться, чтобы предотвратить двойную границу.

Question 9

Добавьте следующий CSS в div справа:

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

Или просто удалите одну из границ.

Question 10

Я просто использую

border-collapse: collapse;

в родительском элементе

Question 11

При использовании 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;
}

Question 12

  <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

Question 13

Мой вариант использования был для ящиков в одной строке, где я знал, каким будет последний элемент.

.boxes {
  border: solid 1px black  // this could be whatever border you need
  border-right: none;
}

.furthest-right-box {
  border-right: solid 1px black !important;
}

Question 14

Я знаю, что это запоздалая реакция, но я просто хотел сбросить свои 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 voila, идеальный стол. Теперь очевидно, что это приведет к тому, что ваши DIV будут иметь различия в ширине в 1 пиксель (в частности, первый), но для меня это никогда не создавало никаких проблем. Если это так в вашей ситуации, я думаю, тогда вы будете больше зависеть от маржи.

Question 15

Я смог добиться этого с помощью этого кода:

td.highlight {
    outline: 1px solid yellow !important;
    box-shadow: inset 0px 0px 0px 3px yellow;
    border-bottom: 1px solid transparent !important;
}

Question 16

Очень старый вопрос, но это был первый результат Google, поэтому для всех, кто сталкивается с этим и не хочет, чтобы медиа-запросы повторно добавляли границу справа / слева от элемента на мобильном телефоне и т. Д.

Я использую следующее решение:

.element {
    border: 1px solid black;
    box-shadow: 0 0 0 1px black;
}

Это работает, потому что вы увидите рамку в 2 пикселя вокруг элемента, состоящего из границы и тени. Однако там, где элементы встречаются, тень накладывается, и ширина остается 2 пикселя;

Question 17

А как насчет того, чтобы 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>

ДЕМО

Question 18

Я предпочитаю использовать другой div позади них в качестве фона и удалять все границы. Вам нужно просто рассчитать размер фонового div и положение div переднего плана.

Answer 1

87

Скажем, у меня есть два блока div рядом друг с другом (возьмите https://chrome.google.com/webstore/category/home в качестве ссылки) с рамкой.

Есть ли способ (желательно трюк с CSS), чтобы мои div не выглядели как двойные границы? Взгляните на это изображение, чтобы лучше понять, что я имею в виду:

«Двойная» граница

Вы можете видеть, что там, где встречаются два div, кажется, что у них есть двойная граница.

css Джон Смит
источник

нет, я использую это с изотопом, поэтому не могу использовать таблицу. div имеют разные размеры

Джон Смит

Это проблема только для вас, слева-направо, или вам тоже нужно беспокоиться об этом сверху-снизу?

VictorKilo 02

Я бы хотел, чтобы в CSS для этого не было лучшего решения. :-(

richardstelmach

Answer 2

нет, я использую это с изотопом, поэтому не могу использовать таблицу. div имеют разные размеры

Джон Смит

Answer 3

Это проблема только для вас, слева-направо, или вам тоже нужно беспокоиться об этом сверху-снизу?

VictorKilo 02

Answer 4

Я бы хотел, чтобы в CSS для этого не было лучшего решения. :-(

richardstelmach

Answer 5

19

#divNumberOne { border-right: 0; }

Энди
источник

11

Это единственный реальный способ сделать это, чтобы ничего не испортить. Если вам нужно сделать несколько элементов, черт возьми, скажем, 100 div, вы могли бы сделать, div { border-right: none; } div:last-child { border-right: 1px solid black; }что дало бы желаемый эффект

Энди

да, это всегда можно сделать таким образом, но мне было интересно, есть ли способ сделать это на чистом CSS, без необходимости использовать более одного класса (у меня будет больше строк и столбцов)

Джон Смит

3

Это чистый css, я использовал псевдокласс (последний дочерний элемент), поэтому я никоим образом не модифицировал html, существует много псевдоклассов, и я бы сказал, идите по этому пути, поскольку я не думаю, что есть альтернатива

Энди

Посмотрите в Nth Child, вы можете сделать это таким образом, используя нечетное и четное, или, в зависимости от вашего макета, вы можете рассчитать его так, как хотите.

MaxwellLynn

1

Почему это было принято как правильный ответ? Я действительно не думаю, что это то, что он искал. Это определенно не масштабируемое решение.

Кевин Бехан,

Answer 6

11

Это единственный реальный способ сделать это, чтобы ничего не испортить. Если вам нужно сделать несколько элементов, черт возьми, скажем, 100 div, вы могли бы сделать, div { border-right: none; } div:last-child { border-right: 1px solid black; }что дало бы желаемый эффект

Энди

Answer 7

да, это всегда можно сделать таким образом, но мне было интересно, есть ли способ сделать это на чистом CSS, без необходимости использовать более одного класса (у меня будет больше строк и столбцов)

Джон Смит

Answer 8

3

Это чистый css, я использовал псевдокласс (последний дочерний элемент), поэтому я никоим образом не модифицировал html, существует много псевдоклассов, и я бы сказал, идите по этому пути, поскольку я не думаю, что есть альтернатива

Энди

Answer 9

Посмотрите в Nth Child, вы можете сделать это таким образом, используя нечетное и четное, или, в зависимости от вашего макета, вы можете рассчитать его так, как хотите.

MaxwellLynn

Answer 10

1

Почему это было принято как правильный ответ? Я действительно не думаю, что это то, что он искал. Это определенно не масштабируемое решение.

Кевин Бехан,

Answer 11

78

Если мы говорим об элементах, появление которых не может быть гарантировано в каком-либо определенном порядке (может быть, 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;
}

Cimmanon
источник

1

Спасибо за то, что поделился этим. Я буквально часами работал над этим, идя по краю (а не по контуру). Это прекрасно сработало!

Джесси Хоул

Это действительно умная техника. Ура!

da5id

2

Очень полезно. Я также добавляю position: relative;left: 1px;, чтобы вернуть отрицательную маржу.

Бартош Валицки

1

Это действительно умно !. Я думаю, это должен быть ответ.

Rejoy

Это лучше, чем ответ

CH4B

Answer 12

1

Спасибо за то, что поделился этим. Я буквально часами работал над этим, идя по краю (а не по контуру). Это прекрасно сработало!

Джесси Хоул

Answer 13

Это действительно умная техника. Ура!

da5id

Answer 14

2

Очень полезно. Я также добавляю position: relative;left: 1px;, чтобы вернуть отрицательную маржу.

Бартош Валицки

Answer 15

1

Это действительно умно !. Я думаю, это должен быть ответ.

Rejoy

Answer 16

Это лучше, чем ответ

CH4B

Answer 17

20

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

Демо

Включите ie9.js для поддержки IE8 (это очень полезно для всех селекторов / псевдоэлементов CSS).

Джиона
источник

если у вас более одной строки, первый div во второй строке не имеет левой границы, и с этим трюком выравнивание divs идет влево на 1 пиксель

Афшин

Не было ли более сложной версии? А как насчет элементов с большим right-margin?

Feela 02

@afshin, если я не вижу его макета, как я могу дать конкретный ответ?

Giona

@feeela, я думаю, это довольно просто. В любом случае, right-marginне влияет left-margin: jsfiddle.net/gionaf/D6tHK/1

Giona

1

Это решает боковые двойные границы, но не вертикальные; границы внизу / вверху по-прежнему удваиваются. Есть какие-нибудь подсказки для них?

delphirules

Answer 18

если у вас более одной строки, первый div во второй строке не имеет левой границы, и с этим трюком выравнивание divs идет влево на 1 пиксель

Афшин

Answer 19

Не было ли более сложной версии? А как насчет элементов с большим right-margin?

Feela 02

Answer 20

@afshin, если я не вижу его макета, как я могу дать конкретный ответ?

Giona

Answer 21

@feeela, я думаю, это довольно просто. В любом случае, right-marginне влияет left-margin: jsfiddle.net/gionaf/D6tHK/1

Giona

Answer 22

1

Это решает боковые двойные границы, но не вертикальные; границы внизу / вверху по-прежнему удваиваются. Есть какие-нибудь подсказки для них?

delphirules

Answer 23

15

Еще одно решение, которое можно было бы рассмотреть, - это использовать селектор соседних элементов CSS .

CSS

div {
    border: 1px solid black;
}

div + div {
    border-left: 0;
}

jsFiddle

Стефан
источник

Хороший трюк, спасибо! Я обнаружил, что получил лучшие результаты, border-left: none;иначе у меня будет небольшой промежуток в верхнем левом углу div !? (Fire Fox).

IanB

Вы можете захотеть использоватьdiv + div { border-left: 0; }

Сергей Стадник

Answer 24

Хороший трюк, спасибо! Я обнаружил, что получил лучшие результаты, border-left: none;иначе у меня будет небольшой промежуток в верхнем левом углу div !? (Fire Fox).

IanB

Answer 25

Вы можете захотеть использоватьdiv + div { border-left: 0; }

Сергей Стадник

Answer 26

Вы можете использовать нечетный селектор для достижения этого

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

Развернуть фрагмент

Answer 27

не лучше ли сделать nth-child (even) {border-left: none;}? Так могло получиться нечетное количество столбцов ...

pixelearth

Answer 28

5

Если все div имеют одинаковое имя класса:

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

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

Здесь есть демонстрация JSFiddle .

Родди из Frozen Peas
источник

+1 Один из немногих псевдоклассов, которые распознаются IE 7 + 8…

Feela 02

Нехорошо,

@ Didier68 Но вопрос был не в этом.

Родди из Frozen Peas

Вопрос в том, чтобы «предотвратить двойные границы» ... но без указания, горизонтально или вертикально ... Ваше решение подходит, например, для <TD>, но не для DIV. Я делаю то же самое замечание Стефану Реву!

Didier68

Понятия не имею, о чем вы говорите. Вопрос о div, ответ о div, скрипка использует div. Откуда у тебя ТД?

Родди из Frozen Peas

Answer 29

+1 Один из немногих псевдоклассов, которые распознаются IE 7 + 8…

Feela 02

Answer 30

Нехорошо,

Answer 31

@ Didier68 Но вопрос был не в этом.

Родди из Frozen Peas

Answer 32

Вопрос в том, чтобы «предотвратить двойные границы» ... но без указания, горизонтально или вертикально ... Ваше решение подходит, например, для <TD>, но не для DIV. Я делаю то же самое замечание Стефану Реву!

Didier68

Answer 33

Понятия не имею, о чем вы говорите. Вопрос о div, ответ о div, скрипка использует div. Откуда у тебя ТД?

Родди из Frozen Peas

Answer 34

5

Я опаздываю на шоу, но попробуйте использовать свойство контура, например:

.item {
  outline: 1px solid black;
}

Контуры в CSS не занимают физического пространства и поэтому будут перекрываться, чтобы предотвратить двойную границу.

Майкл Джованни Пумо
источник

также работает, когда строка разбивается на несколько строк на меньших экранах - все остальные ответы не работают, когда ваши div могут разбиваться на новые строки. тогда у вас будет хотя бы один div со стороной без рамки. спасибо за обмен - проголосовали за

DigitalJedi

Намного лучше найти решение, чем взломать. Спасибо.

Форрест

Answer 35

также работает, когда строка разбивается на несколько строк на меньших экранах - все остальные ответы не работают, когда ваши div могут разбиваться на новые строки. тогда у вас будет хотя бы один div со стороной без рамки. спасибо за обмен - проголосовали за

DigitalJedi

Answer 36

Намного лучше найти решение, чем взломать. Спасибо.

Форрест

Answer 37

Добавьте следующий CSS в div справа:

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

Или просто удалите одну из границ.

Answer 38

1

Я просто использую

border-collapse: collapse;

в родительском элементе

Джейси
источник

Answer 39

При использовании 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;
}

Answer 40

  <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

Answer 41

Мой вариант использования был для ящиков в одной строке, где я знал, каким будет последний элемент.

.boxes {
  border: solid 1px black  // this could be whatever border you need
  border-right: none;
}

.furthest-right-box {
  border-right: solid 1px black !important;
}

Answer 42

Я знаю, что это запоздалая реакция, но я просто хотел сбросить свои 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 voila, идеальный стол. Теперь очевидно, что это приведет к тому, что ваши DIV будут иметь различия в ширине в 1 пиксель (в частности, первый), но для меня это никогда не создавало никаких проблем. Если это так в вашей ситуации, я думаю, тогда вы будете больше зависеть от маржи.

Answer 43

Я смог добиться этого с помощью этого кода:

td.highlight {
    outline: 1px solid yellow !important;
    box-shadow: inset 0px 0px 0px 3px yellow;
    border-bottom: 1px solid transparent !important;
}

Answer 44

Очень старый вопрос, но это был первый результат Google, поэтому для всех, кто сталкивается с этим и не хочет, чтобы медиа-запросы повторно добавляли границу справа / слева от элемента на мобильном телефоне и т. Д.

Я использую следующее решение:

.element {
    border: 1px solid black;
    box-shadow: 0 0 0 1px black;
}

Это работает, потому что вы увидите рамку в 2 пикселя вокруг элемента, состоящего из границы и тени. Однако там, где элементы встречаются, тень накладывается, и ширина остается 2 пикселя;

Answer 45

А как насчет того, чтобы 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>

ДЕМО

Answer 46

-3

Я предпочитаю использовать другой div позади них в качестве фона и удалять все границы. Вам нужно просто рассчитать размер фонового div и положение div переднего плана.

колодец7м
источник

Я считаю, что мое решение лучшее, хотя и критики. Это тот же принцип, что и рисование таблицы размером 1px:

well7m 03

Answer 47

Я считаю, что мое решение лучшее, хотя и критики. Это тот же принцип, что и рисование таблицы размером 1px:

well7m 03

Предотвращение «двойных» границ в CSS

Ответы:

CSS

jsFiddle