删除容器之间的边距间距？

Question

我使用显示表和表格单元格使一些列表项水平排列。内容是动态的，因此每个li中的文本长度和li的数量将会改变。

我使用border-spacing在li之间创建一个边距，但是我没有在第一个li和它包含ul之间，或者在最后一个li和ul之间的边距。

<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    </ul>
  <p>Other content </p>
</div> 

div {
  background: grey;
}
ul {
  padding: 0;
  list-style-type: none;
  display: table;
  width: 100%;
  border-spacing: 5px;
}
li {
  display: table-cell;
  background: gold;
}

http://codepen.io/anon/pen/rHDys

Answer 1

你可以使用边框制作技巧，我已经创建了一个小型演示：http://codepen.io/anon/pen/rHosz

div {
  background: grey;
}
ul {
  padding: 0;
  list-style-type: none;
  display: table;
  table-layout: fixed;
  width: 100%;
  padding-top: 5px;
}
li {
  display: table-cell;
  background: gold;
  border-left: 5px solid grey;
}
li:first-child{
  border-left: none;
}

Answer 2

它不漂亮，但您可以执行以下操作：

ul {
    padding: 0;
    list-style-type: none;
    display: table;
    width: 100%;
    margin-left: -5px;
    width: calc(100% + 10px);
    border-spacing: 5px;
}

Answer 3

这个答案使用CSS3，它可能与旧浏览器不兼容或不支持。

div {
  background: grey;
}
ul {
  padding: 0;
  list-style-type: none;
  display: table;
  width: 100%;
  border-collapse: collapse;
}
li {
  display: table-cell;
  background: gold;
  border-right: 5px solid grey;
  border-top: 5px solid grey;
}
li:last-child {
  border-right: none;
}

参见示例：http://codepen.io/anon/pen/rqzkJ

Answer 4

<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    </ul>
  <p>Other content </p>
</div> 

div {
  background: grey;
}
ul {
  padding: 0;
  list-style-type: none;
  display: table;
  width: 100%;
  border-spacing: 5px;
}
li {
  display: table-cell;
  background: gold;
}

border-spacing：5px; 删除此