Question

问题

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

我正在尝试创建的网格看起来非常像这个字符＃
内部每个项目的完整边框，不包含边框，没有轮廓。

如何？

示例

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

小提琴

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: