CSS显示不正确

Question

Below is a preview (made in Photoshop) of how my list must look like:

Below is the CSS code that I have:

.newsFeed {
    float: left;
    width: 728px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.newsFeed li {
    width: 233px;
    height: 244px;
    padding: 5px;
    border-right: 10px solid #dddddd;
    margin: 0;
    float: left;
}

.newsFeed li img.image {
    width: 226px;
    height: 157px;
    margin: 0 0 5px 0;
}

If you calculate the margin resulted from 3 list elements 10px*3 = 30px you will know that instead of 3 items per line, I only get two items. How can I remove the border of the last element in a line?

(instead of this)
+-----------+
| 1 | 2 | 3 |
|---+---+---|
| 4 | 5 | 6 |
+-----------|

(I get this)
+-----------+
| 1 | 2 |   |
|---+---+   |
| 3 | 4 |   |
|---+---+   |
| 5 | 6 |   |
+-----------+

I have tried to apply a negative margin/padding to the .newsFeed rule:

.newsFeed {
    // ... code
    // margin-right: -10px;
}

Obviously, this didn't work. Can anybody help me to solve this?

Merry Christmas!

Answer 1

total pixel for the maincontainer .newsFeed is 728px
...........................................................
less:.newsFeed li                       width: 233px;
      padding: 5px *2                =padding: 10px; right and left
                                 border-right: 10px
  ................................................................
  total pixel occupied by one div is          253px
  total pixel occupied by three divs are      759px
  so this reason it pushes the third div into the next row

Answer 2

Padding:5px also adds to the width (so 3*2*5 = 30px )

.newsFeed li {
width: 226px;
height: 244px;
padding: 5px;
border-right: 10px solid #dddddd;
margin: 0;
float: left;
}
.newsFeed li.last-item {
border-right: none;
}

Html

<ul>
     <li></li>
     <li></li>
     <li class="last-item"></li>
     <li></li>
     <li></li>
     <li class="last-item"></li>
 </ul>

Answer 3

My suggestions is that instead of using fixed sized li elements, you should use a percentage based size in conjunction with box-sizing: border-box

So a working code would be:

li {
   box-sizing: border-box;
   -moz-box-sizing: border-box; 
   width: 33%;
}

Explanation:

You are effectively giving a width of:

  233  - The 'inner' width
 +2*5  - Two times the padding
 +10   - The left border
 =253  - The effective width

 253*3 = 759 pixels

But you are only giving a pixel size of 728. Of course you could set the inner width to 759 pixels but a relative size with box-sizing would also allow a resizing of the list without having to change the individual values.

Conclusion Use a relative width with box-sizing or set the list width to 759.

PS: Please do not use another class as it just pollutes the css classes.

Edit

Oops, here also have a plunker showing a solution.

Answer 4

An idea came to me:

I can use the nth-child() property with the 3n attribute, so that I will only have 3, 6, 9, 12...

.newsFeed li:nth-child(3n) {
    border-right: none;
}

And this works.