两列中的一个列表项-导致间隙的长文本字符串问题，CSS

Question

我有一个列表项，我想将列表扩展到两列中。

我已经完成了这项工作，但当其中一个li中有一个长字符串时，它会在相反的列上造成一个间隙

我在这里有一个演示：http://jsfiddle.net/q7ryE/

当有长字符串的文本时，我该如何避免这种情况，这样所有内容都可以放在两列中的漂亮列表视图中，没有间隙/空格？

<div class="container">
    <ul class="list removedArea">
        <li><span>more text here</span></li>
        <li><span>more text here</span></li>
        <li><span>more text here</span></li>
    <!-- Long string causes gap pushing the li down on opposite site -->
       <li><span class="fl">this is a very long name which will overlap and cause a gap, i need to reduce this gap when there is a long string of text</span>
       </li>
       <li><span>more text here</span></li>
   </ul>
</div>

Answer 1

您可以以适当的方式使用溢出，这样就可以避免空格。。

修改的CSS

 .list.removedArea li {
    display: block;
    width: 45%;
    float: left;
    border-bottom: 1px dashed #ddd;
    border-top: none;
    border-left: 1px solid #CFCFCF;
    border-right: 1px solid #CFCFCF;
    color: #222;
    margin: 3px 3px 3px 0;
    padding: 5px;
    height: 70px;
    font-size: 14px;
    overflow-x: hidden; // added
    overflow-y: scroll; // added
    text-align: left;
    background-color: #fff;
    margin: 0 5px 0 10px;
    border-radius: 0;
    cursor: pointer;
    }

查看