Question

下面是我的列表必须如何显示的预览（在Photoshop中制作）：

enter image description here

以下是我的CSS代码：

.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;
}

如果您计算3个列表元素10px*3 = 30px产生的保证金，您将知道每行只有3个项目而不是3个项目。如何删除行中最后一个元素的边框？

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

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

我尝试对.newsFeed规则应用负边距/填充：

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

显然，这不起作用。任何人都可以帮我解决这个问题吗？

圣诞快乐！

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

填充：5px也会增加宽度（所以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

我的建议是，不应使用固定大小的li元素，而应使用基于百分比的大小与box-sizing: border-box

结合使用

所以一个有效的代码是：

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

<强>解释

你实际上给出了宽度：

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

 253*3 = 759 pixels

但是你只给出728的像素大小。当然你可以将内部宽度设置为759像素，但是使用box-sizing的相对大小也可以调整列表的大小而不必更改单个值

<强>结论使用box-sizing的相对宽度或将列表宽度设置为759。

PS：请不要使用其他类，因为它只会污染css类。

修改

Oops, here also have a plunker showing a solution.

Answer 4

我想到了一个想法：

我可以将nth-child()属性与3n属性一起使用，这样我就只有3,6,9,12 ......

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

这很有效。

CSS显示不正确

4 个答案: