css 多列列表，包含不同高度的列表项

Question

我有一个元素列表，每个元素都包含在一个我想分成两列的框中。像这样的：

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 之类的东西，或者是否有更简单的方法。

Answer 1

试试这个：

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

SEE DEMO