列表中的列表排列

Question

我有一个列表：

这是一个简单的列表，我试图在css中编辑。

如何使列表排列在完美的列中，例如在每个元素之间做一个预先定义的空间，以便它自行安排？

我已经尝试过填充填充和边距，但它似乎没有做到这一点。

Answer 1

您可以将<li>设置为display: inline-block;并为其提供width: 33.33%;，这样它们就会排列在三列中。

我不会在列之间的水平距离上花费太多精力，除非文本标签可能变成两个宽并且必须分成多行。如果您需要允许，可以设置display: table-cell，然后添加所需垂直空间的padding-right:。

Answer 2

您可以使用div将列表附加float属性，然后设置margin值以控制空间，请参阅我的以下演示。

.list {
   float:left;
   
}
.list1 {
 margin-right: 20px; 
 
} 
.list2 {
 margin-right: 20px; 
 
} 

<div  class = 'list list1'>
  <ul>
    <li><input type = 'checkbox'><span>AAAAAAAA</span></li>
    <li><input type = 'checkbox'><span>AAAA</span></li>
    <li><input type = 'checkbox'><span>AA</span></li>
  </ul>
</div>

<div  class = 'list list2'>
  <ul>
    <li><input type = 'checkbox'><span>BBBBB</span></li>
    <li><input type = 'checkbox'><span>BBBBBBB</span></li>
    <li><input type = 'checkbox'><span>AA</span></li>
  </ul>
</div>

<div  class = 'list list3'>
  <ul>
    <li><input type = 'checkbox'><span>CCC</span></li>
    <li><input type = 'checkbox'><span>CCCCCCCC</span></li>
    <li><input type = 'checkbox'><span>CCCC</span></li>
  </ul>
</div>

Answer 3

ups可以使用inline-block or float，宽度为百分比％

.test{
  list-style: none;
  margin: 0 0 50px;
  padding: 0;
  font-size: 0;
  letter-spacing: -4px;
 }
.test li{
  width: 25%;
  font-size: 12px;
  letter-spacing:0;
  padding: 5px 0;
  display: inline-block;
  vertical-align: middle;
  }
.test2{
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: hidden;
 }
.test2 li{
  width: 25%;
  float: left;
  font-size: 12px;
  padding: 5px 0;
  }

    <ul class="test">
              <li> <input type="checkbox"/>  content</li>
              <li> <input type="checkbox"/>  content</li>
              <li> <input type="checkbox"/>  content</li>
              <li> <input type="checkbox"/>  content</li>
              <li> <input type="checkbox"/>  content</li>
              <li> <input type="checkbox"/>  content</li>
              <li> <input type="checkbox"/>  content</li>
              <li> <input type="checkbox"/>  content</li>
    </ul>
    <ul class="test2">
              <li> <input type="checkbox"/>  content</li>
              <li> <input type="checkbox"/>  content</li>
              <li> <input type="checkbox"/>  content</li>
              <li> <input type="checkbox"/>  content</li>
              <li> <input type="checkbox"/>  content</li>
              <li> <input type="checkbox"/>  content</li>
              <li> <input type="checkbox"/>  content</li>
              <li> <input type="checkbox"/>  content</li>
    </ul>

Answer 4

尝试使用CSS3 column-count

div {
  -webkit-column-count: 3;
  /* Chrome, Safari, Opera */
  -moz-column-count: 3;
  /* Firefox */
  column-count: 3;
}

<div>
  <input type="radio" name="group">Option 1
  <br>
  <input type="radio" name="group">Option 2
  <br>
  <input type="radio" name="group">Option 3
  <br>
  <input type="radio" name="group">Option 4
  <br>
  <input type="radio" name="group">Option 5
  <br>
  <input type="radio" name="group">Option 6
  <br>
  <input type="radio" name="group">Option 7
  <br>
  <input type="radio" name="group">Option 8
  <br>
  <input type="radio" name="group">Option 9
  <br>
  <input type="radio" name="group">Option 10
  <br>
  <input type="radio" name="group">Option 11
  <br>
</div>