Имитация границы в списках (без таблиц)

Question

У меня всегда одна и та же проблема, когда у меня есть 2 смежных элемента с границами, границы объединяются.С таблицами у нас есть свойство border-collapse для решения этой проблемы.
Я попытался опустить границу с одной из сторон, но это работает только для элементов в середине, первый и последний элемент пропустят границу.

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

Answer 1

Вот как я это решил: добавьте margin-left / -top -1px к каждому элементу li. Тогда границы действительно рухнут без всяких уловок.

Answer 2

Вы можете добавить левую и нижнюю границу к ul и удалить ее из li.

fiddle: http://jsfiddle.net/TELK7/

html:

<ul>
    <li>one</li>
    <li>two</li>
</ul>

css:

ul{
    border: 0 solid silver;
    border-width: 0 0 1px 1px;
}
li{
    border: 0 solid silver;
    border-width: 1px 1px 0 0;
    padding:.5em;
}

Answer 3

Вы можете сделать это с помощью псевдо-селекторов CSS:

li {
    border: 1px solid #000;
    border-right: none;
}

li:last-child {
    border-right: 1px solid #000;
}

Это очистит правую границу для всех элементов li, кроме последнего в списке.

Answer 4

Немного опоздал на эту вечеринку, но вот как получить границу завершения элемента списка для изменения при наведении.

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

li:last-child {border-bottom:2px solid silver;}

Затем выберите стиль рамки при наведении:

li:hover {border-color:#0cf;}

Наконец, используйте селектор брата для изменения следующая верхняя граница элемента, соответствующая границе вашего элемента наведения.

li:hover + li {border-top-color:#0cf;}

http://jsfiddle.net/8umrq46g/

Answer 5

Старая тема, но я нашел другое решение, и более важное:

ВЫ НЕ ДОЛЖНЫ ЗНАТЬ, КАКОВЫ ЭЛЕМЕНТ РОДИТЕЛЯ

li{
  border: 2px solid gray;
}

li + li{
  border-top: none;
}

/* Makeup */ li{width: 12rem;list-style: none;padding: .5rem 1rem;}

<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>

Answer 6

Этот поток довольно старый, но я нашел новое решение, используя свойство outline. Он работает для вертикальных и горизонтальных списков, даже если горизонтальный список состоит из нескольких строк.

Используйте границу, равную половине предполагаемой ширины, и добавьте контур, также равный половине предполагаемой ширины.

ul {
  list-style-type: none;
  width: 100px;
  margin: 0;
  /* also set the parent's padding to half of the intended border's width to prevent the outlines from overlapping anything they shouldn't overlap */
  padding: 0.5px;
}
li {
  display: inline-block;
  float: left;
  box-sizing: border-box;
  text-align: center;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;

  /* simulates a 1px-wide border */
  border: 0.5px solid black;
  outline: 0.5px solid black;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

Answer 7

Дайте поля полей.Например,

HTML:

<ul>
    <li>Stuff</li>
    <li>Other Stuff</li>
<ul>

CSS:

li { border: 1px solid #000; margin: 5px 0; }

jsfiddle пример