css與列表項不同高度的多列列表

我有一個列表中的每個元素都包含在一個框中，我想分成兩列。事情是這樣的：css與列表項不同高度的多列列表

HTML

<ul> 
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quos, unde, tenetur labore consequuntur repudiandae tempore totam soluta praesentium non cumque assumenda incidunt itaque pariatur animi eaque nam aliquid repellendus! Sed, eius laudantium deserunt pariatur rerum possimus enim iste corporis doloribus dolor ea ducimus facere similique qui nostrum excepturi quis ut aliquam animi nam eos doloremque et rem repellat libero neque at quas nesciunt explicabo fugiat.</li> 
    <li>Modi, eos, veritatis, laboriosam, cumque neque similique ea harum quas</li> 
    <li>totam cupiditate maiores impedit molestias non maxime nam quis animi laborum nesciunt ut provident sed dolorem dolorum veniam asperiores eligendi ad ratione sunt perferendis facilis</li> 
    <li>in earum itaque odio fugit mollitia exercitationem tempora necessitatibus voluptates accusamus dolore architecto eum natus. At, nulla, natus magnam quia provident consectetur nobis commodi quis repellendus dicta. Quo, placeat, excepturi iusto ipsam ullam cumque amet molestiae quaerat pariatur laboriosam voluptate</li> 
    <li>nostrum explicabo esse iure debitis mollitia minima doloribus architecto velit dolorum autem voluptatem aperiam quidem odit dolore itaque quasi.</li> 
    <li>Illum, doloribus, assumenda odit incidunt accusamus perferendis libero quas temporibus sit rerum tempora ipsum inventore aliquid accusantium sequi eveniet mollitia dolorem</li> 
    <li>quibusdam omnis architecto officiis ullam earum error. Quia, velit, odio, pariatur, officia maiores accusantium quibusdam aliquam nisi asperiores ipsam odit saepe molestiae cumque adipisci vel quis sapiente cum consectetur repellat deserunt. Dolore, neque harum recusandae praesentium quos officiis</li> 
    <li>dolores! Aliquid, aut nesciunt officiis. Beatae, maiores,</li> 
</ul>

CSS

ul { 
list-style-type: none; 
-moz-column-count: 2; 
-moz-column-gap: 20px; 
-webkit-column-count: 2; 
-webkit-column-gap: 20px; 
column-count: 2; 
column-gap: 20px; 
} 

li{ 
padding: 30px; 
background: chartreuse; 
margin-bottom: 20px; 
}

我的問題是，列基於文本切，而不是<li>的，你可以在這裏看到：http://jsfiddle.net/hZSCm/

有沒有辦法讓我的列正常使用CSS或我只能做到這一點是JavaScript？如果是的話，我不得不使用類似columnizer的東西，還是有一個更簡單的方法。

來源

2013-10-10 mantis

試試這個：

li{ 
    padding: 10px; 
    background: grey; 
    margin-bottom: 20px; 
    display: inline-block; /* Add inline-block */ 
}

SEE DEMO

來源

2013-10-10 22:05:08 aldanux

css與列表項不同高度的多列列表

回答

相關問題