如何让 ul li 元素向下浮动

Question

像往常一样，ul li 元素从左到右，如红色图像所示。但我想要绿色图像序列。我使用了浮动和显示内联块。请建议

Answer 1

您可以使用 column-count: 1;。在 CSS.

中的完整详细信息

Answer 2

您可以使用 CSS-Property column-count 来解决您的问题。

ul#css3columnlist {
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    column-count: 2;
    column-gap: 10px;
}
ul#css3columnlist li{
    line-height: 2em;
    display: block;
}

看到这个website

Answer 3

您可以使用 column-count 属性 查看下面的演示

ul {
   -moz-column-count: 3;
   -moz-column-gap: 10px;
   -webkit-column-count: 3;
   -webkit-column-gap: 10px;
   column-count: 3;
   column-gap: 10px 10px 0 10px;
   width: 450px;
   background: #3FB441;
   padding:10px;
}
ul li {
   line-height: 2em;
   display: block;
   background:#fff;
   text-align:center;
   margin-bottom:10px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>

如何让 ul li 元素向下浮动

How to get ul li elements float to down

html

css

display