How to deal with the disappearance of CSS boundary lines

This time to everyone in the CSS boundary line disappears how to deal with, processing in the CSS boundary line disappears notice what, the following is the actual case, together to see.

Let's take a look at some of the navigation bars, asking for the right border of the last column in each row to disappear, and how to implement it most conveniently and elegantly in all browsers.

If you don't need compatible ie8-, it's a good way to use CSS3 's new selector.

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

Of course, if the number is not too many, give the element that needs to remove the right border directly to add a specific class will be finished. Or, using table is a bit cumbersome, but it can be implemented.

But it's not elegant enough.

Here's a little trick, by adding a reverse border and adding a negative margin.

First, assume that our UL structure is as follows:

<p class= "Ul-container" >     <ul>         <li> testing </li>         <li> disappearing </li>         < li> boundary line </li>         <li> right </li>         <li> boundary line </li>         <li> vanishing </li>         <li> testing </li>     </ul> </p>

, assuming that each row is lined with 3 Li, each Li 100px wide, 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 result:

Next, we set the container Ul-container to Overflow:hidden and move the UL left one pixel margin-left:-1px.

In this way, all the borders of the first column of the UL have been shifted to the left by one pixel and have been overflow:hidden, causing the next Li's right border to look like the left box, but it's just a decoy:

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

As shown in the start diagram:

This approach can be used in all cases where the number of different Li numbers varies, because each newly added Li generates a left border that separates from the previous Li element, but visually looks like the right border of the previous Li element.

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Set scroll bar style

Summary of the center layout of CSS

The method of horizontal vertical centering of three absolutely positioned elements