-2

リスト項目が 1 つあり、リストを 2 つの列に広げたいと考えています。

私はこれを機能させましたが、liの1つに長いテキスト文字列があると、反対側の列にギャップが生じます

ここにデモがあります: http://jsfiddle.net/q7ryE/

テキストの長い文字列がある場合、これを回避するにはどうすればよいですか?すべてがギャップ/スペースのない2つの列の素敵なリストビューに収まりますか?

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

1 に答える 1

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

これをチェックしてください

于 2013-08-05T11:12:33.293 に答える