How does CSS realize the disappearance of the boundary line

This article mainly introduces how CSS to achieve the disappearance of the boundary line, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Let's take a look at the following figure, which is often seen in some navigation bars, requiring the right border of the last column in each row to disappear. How can it be implemented most easily and elegantly in all browsers?

If you don't need to be compatible with IE8-, it's a good idea to use the new selector from CSS3.

/ / using pseudo-class selector, select the 3nth element to remove the border li:nth-child (3n) {border-right:none;}

Of course, if the number is not too many, you can simply add a specific class to the elements that need to remove the right border. Or, using table is a little more tedious, but it can be done.

But it's not elegant enough.

A little trick here is to do this by adding a reverse border and a negative margin.

First, suppose our ul structure is as follows:

Test vanishing boundary line right boundary line disappearing test

As shown in the figure, assuming 3 li per line, each li wide 100px, our ul and ul-container widths are set to 300px.

Most importantly, each li sets a left border instead of the right border:

.ul-container, ul {width:300px;} li {float:left; width:99px; border-left:1px solid # 999;}

We will get the following results:

Next, we set the container ul-container to overflow:hidden and move the ul to the left one pixel margin-left:-1px.

In this way, all the borders of the first column in the ul are lost because they have been moved one pixel to the left and are overflow:hidden, so that the right border of the next li looks like the left border, but it is just a trick:

. ul-container {overflow:hidden;} ul {margin-left:-1px;}

The effect picture is shown in the initial illustration:

This approach is suitable for all cases with different li numbers and different rows, because each newly added li generates a left border that is separate from the previous li element, but visually looks like the right border of the previous li element.

Thank you for reading this article carefully. I hope the article "how to achieve the disappearance of the boundary line" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!