html - 两列 ul 之间的空间分隔

Question

我有一个包含两列(li 的)ul。我试图在两列之间进行可见的分离，但我无法让它工作。目标是让每个 li 都有一个 bottom-color 行，但将这些行分开。

这是我目前拥有的:http://codepen.io/anon/pen/JeluB

HTML

<ul id="double">
  <li>asdas</li>
  <li>eee</li>
  <li>iii</li>
  <li>qqqq</li>
  <li>yyyy</li>
  <li>pppp</li>
  <li>p222</li>
</ul>

CSS

ul{
  width:200px;
  overflow: hidden;
  border: 1px solid red;
  padding: 5px;
}

li{
  line-height: 1.5em;
  float: left;
  display: inline;
  border-bottom: 1px solid #DDDDDD;
  border-right: 2px;
}

#double li  { 
  width: 45%;
}

Answer 1

一种解决方案是使用 :nth-child(odd) 应用 border-right:

ul {
  width: 200px;
  overflow: hidden;
  border: 1px solid red;
  padding: 5px;
}
li {
  line-height: 1.5em;
  float: left;
  display: inline;
  border-bottom: 1px solid #DDDDDD;
  border-right: 2px;
}
#double li {
  width: 45%;
}
#double li:nth-child(odd) {
  border-right: solid 1px #DDDDDD;
}
#double li:nth-child(even) {
  margin-left: 5px;
}

<ul id="double">
  <li>asdas</li>
  <li>eee</li>
  <li>iii</li>
  <li>qqqq</li>
  <li>yyyy</li>
  <li>pppp</li>
  <li>p222</li>
</ul>