Question

我有一个ul有两列（li s）。我试图在两列之间进行可见的分离，但我无法让它工作。目标是让每个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

一种解决方案是使用border-right：

应用:nth-child(odd)

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我认为你只需要给li元素一个保证金。例如

li {
    ...
    margin: 0 5px;
    ...
}

Answer 3

just add margin-left and margin rigth in li element
it may be works. http://jsfiddle.net/vrajeshdave148/t89yvepj/3/

Answer 4

我在li标签中添加了奇数和偶数类我已经将float：right CSS规则添加到带有偶数类的li标签中我已经将float：左CSS规则添加到带有奇数类的li标签中我分别为li.even和li.odd添加了一个边框底部这是我已经实现了

ul{
  width:200px;
  overflow: hidden;
  border: 1px solid red;
  padding: 5px;
}

li{
  line-height: 1.5em;
  float: left;
  display: inline;
 }

#double li  { 
  width:45%;
}
li.odd {border-bottom:3px solid #ccc;float:left;}
li.even {border-bottom:3px solid #ccc;float:right;}

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

Answer 5

属性 column-gap 解决了它。

两列之间的空间分隔ul

5 个答案: