CSS 带边框的浮动项目 - 但不是每一边

Question

问题

我有一个简单的浮动列表，每个项目都有边框，但不是每一边。

我尝试创建的网格看起来非常像这个角色#
内部每个项目的全边框，周围没有包含边框，没有轮廓。

如何？

例子

在示例中，最后一项有底边框。他们不应该在那里。
在示例中，右边的边缘有右边框。他们不应该在那里。
第一个列表中的第一项和第三项是正确的。
第二个列表中的第一项和第二项是正确的。

Fiddle

jsfiddle（更新为预期结果）

HTML

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

<br><br>

<ul class="three">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

<h2>Expected result</h2>

<ul>
    <li>One</li>
    <li style="border-right: none;">Two</li>
    <li>Three</li>
     <li style="border-right: none;">Four</li>
    <li style="border-bottom: none;">Five</li>
</ul>

<br><br>

<ul class="three">
  <li>One</li>
    <li>Two</li>
    <li style="border-right: none;">Three</li>
     <li style="border-bottom: none;">Four</li>
    <li style="border-bottom: none;">Five</li>
</ul>

CSS

li {
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    width: 50%;
    float: left;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    list-style: none;
    padding: 30px;
}

ul {
    margin-bottom: 20px;
    overflow: hidden;
}

ul.three li {
    width: 33.33%;
}

Answer 1

如果您只想要容器内部的边框和 none 周围的边框，您可以添加一个带有 overflow:hidden; 的容器，并在 <ul> 元素上使用负边距来隐藏不需要的内容边框：

DEMO

这样，您就不必针对每个元素来根据它在容器中的位置为其添加特定的边框。

div {
  overflow: hidden;
  margin-bottom: 20px;
}
ul {
  margin: 0 -1px -1px 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: left;
  width: 50%;
  padding: 30px;
  box-sizing: border-box;
  list-style: none;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.three li {
  width: 33.33%;
}

<div>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
  </ul>
</div>

<div>
  <ul class="three">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
  </ul>
</div>

CSS 带边框的浮动项目 - 但不是每一边

CSS float items with borders - But not on each side

css

grid

css-float

border

gallery