Modeling crash-crash in lists (no tables)

Question

I always have the same problem, when I have two adjacent elements with borders, the borders are merged. For tables, we have a border-collapse property to solve this.

I tried to lower the border from one side, but this only works for elements in the middle, the first and last elements skip the border.

Does anyone know a solution for list items?

Answer 1

You can add a left and bottom border to ul and drop it from li.

script: 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 2

Here's how I solved it: add margin-left / -top -1px to each li element. Then the borders really collapse without any tricks.

Answer 3

You can do this with CSS pseudo selectors:

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

This will clear the right hand border for all li elements except the last in the list.

Answer 4

It's a bit late for this party, but here's how to get the list item full for hover changes.

First, use (above and below) the borders of the li elements, and then give the latter a lower border.

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

Then select a hover frame style:

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

Finally, use the sibling selector to change the top border of the next element so that it matches the hover border.

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

http://jsfiddle.net/8umrq46g/

Answer 5

Old thread, but I found another solution and more important:

YOU DON'T KNOW HOW A PARENT ELEMENT IS

 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

This thread is pretty old, but I found a new solution using the outline property. It works for vertical and horizontal lists, even if the horizontal list consists of several lines.

Use a border equal to half the estimated width, and add a path with half the estimated width.

 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> 

Answer 7

Give the fields to the elements. For example,

HTML:

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

CSS

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

Jsfiddle example