У меня всегда одна и та же проблема, когда у меня есть два смежных элемента с границами, границы объединены. Для таблиц у нас есть свойство border-collapse для решения этого.
Я пробовал опускать границу с одной из сторон, но это работает только для элементов посередине, первый и последний элементы пропускают границу.
Известно ли кому-нибудь решение для элементов списка?
Вы можете добавить левую и нижнюю границу к ul и отбросить ее из li.
скрипт: 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;
}
Вот как я его решил: добавьте margin-left/-top -1px к каждому элементу li. Тогда границы действительно рушится без каких-либо трюков.
Вы можете сделать это с помощью псевдоселекторов CSS:
li {
border: 1px solid #000;
border-right: none;
}
li:last-child {
border-right: 1px solid #000;
}
Это очистит границу правой руки для всех элементов li, кроме последней в списке.
Немного поздно для этой вечеринки, но вот как получить элемент списка полный для изменения при наведении.
Во-первых, используйте (сверху и снизу) границы элементов li, а затем дайте последнему нижнюю границу.
li:last-child {border-bottom:2px solid silver;}
Затем выберите стиль рамки наведения:
li:hover {border-color:#0cf;}
Наконец, используйте селектор sibling, чтобы изменить верхнюю границу следующего элемента, чтобы он соответствовал границе наведения курсора.
li:hover + li {border-top-color:#0cf;}
Старый поток, но я нашел другое решение и более важно:
ВЫ НЕ ЗНАЕТЕ, КАК ЕСТЬ РОДИТЕЛЬНЫЙ ЭЛЕМЕНТ
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>Этот поток довольно старый, но я нашел новое решение, использующее свойство outline. Он работает для вертикальных и горизонтальных списков, даже если горизонтальный список состоит из нескольких строк.
Используйте границу, равную половине предполагаемой ширины, и добавьте контур с половиной предполагаемой ширины.
ul {
list-style-type: none;
width: 100px;
margin: 0;
/* also set the parent padding to half of the intended border 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>Дайте полям элементов. Например,
HTML:
<ul>
<li>Stuff</li>
<li>Other Stuff</li>
<ul>
CSS
li { border: 1px solid #000; margin: 5px 0; }