如何在两个垂直部分展示李(像报纸一样并排）

how to show li in two vertical parts(side by site like newspaper)

本文关键字：一样 两个 垂直部      更新时间：2024-04-26

所以我要做的是将有序列表显示为两个独立的部分。

<li>hi</li>  <li>hi</li>
<li>hi</li>  <li>hi</li>
<li>hi</li>  <li>hi</li>
<li>hi</li>  <li>hi</li>
<li>hi</li>  <li>hi</li>

我该怎么做？

https://jsfiddle.net/

<div class="post">
    <h2 class="title">Mywebsite <small>orderedlist</small></h2>
        <div style="clear: both;">&nbsp;</div>
        <div class="entry">
            <p><a href="#" class="image-shadow"><img src="http://i.imgur.com/qS86202.jpg" width="500" height="150" alt="" /></a></p>
            <p>
               <ol>
                  <li>a</li>
                  <li>b</li>
                  <li>c</li>
                  <li>d</li>
                  <li>d</li>
                  <li>e</li>
                  <li>f</li>
              </ol>
           </p>
    </div>
</div>

你是这样说的吗？

ol { 
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}

您可以制作两个ol块并向左浮动，也可以使用我建议的列数。您不需要将ol块放在div中——它们是块元素，就像div是块元素一样。另外，p是一个块元素，因此也不需要放入div中。

相关文章：