带边框的 CSS float 元素 - 但不是每一边

Question

问题

我有一个简单的 float 列表，每个元素都有边框，但不是每一边。

• 我尝试创建的网格看起来非常像这个 Angular 色#
• 内部每个元素的完整边框，周围没有包含边框，没有轮廓。

如何？

例子

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

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

如果您只想要内部边框而容器周围没有边框，您可以添加一个带有 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>