如何让ul li元素浮动下来

Question

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

Answer 1

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

这里是w3schools

中的完整详情

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属性检查下面的演示

来执行此操作

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;