Some interesting CSS questions (7) -- The problem of the disappearing boundary line and the css boundary line

Some interesting CSS questions (7) -- The problem of the disappearing boundary line and the css boundary line

Start this series and talk about some interestingCSSQuestions and question types are not empty. What to think of is not only to broaden the problem-solving ideas, but also to involve CSS details that are easy to ignore.

Compatibility is not taken into consideration in solving the problem. The question is just a blank question. What do you think of? If you have the uncommon CSS attribute in solving the problem, please study it.

Update, update, and update important things three times.

Some interesting CSS questions (1) -- Implementation of the vertical bar on the left

Some interesting CSS questions (2) -- about the box model from the implementation of the striped border

Some interesting CSS questions (III)-How much do I know about the stacked sequence and stack context?

Some interesting CSS questions (4) -- Starting from reflection, talking about how CSS inherits inherit

Some interesting CSS questions (5) -- center a single row, center two rows to the left, and omit more than two rows

Some interesting CSS questions (6)-fully compatible multi-column uniform layout

All questions are summarized in my Github.

 

7. The line that disappears

It is often seen in some navigation bars that the right border of the last column in each line disappears. How can we achieve the most convenient and elegant implementation in all browsers?

If no compatibility is requiredIE8-So using the selector added by CSS3 is undoubtedly a good method.

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

Of course, if the number is not determined, simply add a specific class to the element that needs to remove the right border. Alternatively, table can be used even though it is cumbersome.

However, this is not elegant enough.

Here is a trick: Add a reverse border and add a negative border.margin.

First, assume that ourulThe structure is as follows:

<Div class = "ul-container"> <ul> <li> test </li> <li> disappear </li> <li> boundary </li> <li> </li> <li> boundary </li> <li> disappears </li> <li> test </li> </ul> </div>

As shown in, suppose three rows are arrangedli, EachliWidth100px, Our ul and ul-container width are set300px.

Most importantly, eachliSet a left border instead of a 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 willul-containerSetoverflow:hiddenAndulMove one pixel leftmargin-left:-1px.

This wayulAll the borders in the first column in are removed one pixel left andoverflow:hiddenAnd disappears, causing the nextliThe right border looks like the left border, but it's just a blind eye:

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

As shown in the preceding figure:

Demo stamp me

This method can be adaptedDifferentliNumber of different linesBecause each newly addedliWill generate a left border with the previousliElement Separation, but visually looks like the previousliThe right border of the element.

 

All the questions are summarized on my Github and sent to my blog for more communication.

At the end of this article, if you have any questions or suggestions, you can have a lot of discussions, original articles, and limited writing skills. If there are any mistakes in this article, please kindly advise.