Let's talk about some interesting CSS topics (7) – the problem of disappearing border lines

Start this series and talk about some interesting CSS questions. The types of questions are wild and imaginative. Say whatever comes to mind. Not only to broaden the ideas for solving problems, but also to cover some CSS details that are easily overlooked.

Compatibility is not taken into account when solving problems. The questions are wild and wild. Just say whatever comes to mind. If there are CSS properties that you feel are unfamiliar in the problem solving, go and study them quickly.

Keep updating, keep updating, keep updating, say important things three times.

Let’s talk about some interesting CSS topics (1)--How to implement the vertical bar on the left

Let’s talk about some interesting CSS topics (2) – Talking about the box model from the implementation of striped borders

Let’s talk about some interesting CSS topics (3) – How much do you know about stacking order and stack context

Let’s talk about some interesting CSS topics (4) – starting with reflection, let’s talk about CSS inheritance inherit

Let’s talk about some interesting CSS topics (5)--center a single line, center two lines, and omit more than two lines

Let’s talk about some interesting CSS issues (6) – fully compatible multi-column uniform layout issues

All topics are summarized in my Github.

7. The disappearing borderline problem

Look at the picture below, which is often seen in some navigation bars. It is required that the right border of the last column in each row disappear. How to implement it in the most convenient and elegant way in all browsers?

If you don’t need to be compatible with IE8-, then using the new selector added in CSS3 is undoubtedly a good way.

// 使用伪类选择器，选择第 3n 个元素去掉边框
li:nth-child(3n){
  border-right:none;
}

Of course, if the number is definitely not that many, just add a specific class directly to the element that needs to have its right border removed, and that's it. Alternatively, using a table is a bit more cumbersome, but it can also be achieved.

But this is not elegant enough.

Here is a little trick, which is to add an inverse border and add a negative margin.

First, assume that our ul structure is as follows:

<div class="ul-container">
    <ul>
        <li>测试</li>
        <li>消失</li>
        <li>边界线</li>
        <li>右侧</li>
        <li>边界线</li>
        <li>消失</li>
        <li>测试</li>
    </ul>
</div>

As shown in the figure, assuming that there are 3 li arranged in each row, each li width 100px, our ul and ul-container widths are both set to 300px.

The most important thing is that each li sets 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 set the container ul-container to overflow:hidden and move ul left by one pixel margin-left:-1px.

In this way, all the borders of the first column in ul have disappeared because they were moved one pixel to the left and overflow:hidden, causing the right border of the next li to look like the left border, but in fact it is just A blinding trick:

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

The rendering is as shown in the beginning:

Demo poke me

This approach can be adapted to all situations where different li have different numbers of rows, because each newly added li will generate a left border separate from the previous li element, just visually It looks like the right border of the previous li element.

All the topics are summarized in my Github and posted to the blog in the hope of getting more exchanges.

This is the end of this article. If you still have any questions or suggestions, you can communicate more. It is an original article. The writing style is limited and the knowledge is shallow. If there is anything wrong in the article, please let me know.