Составьте список организовать в столбцах

Question

У меня есть список, как, например:

Это простой список, который я пытаюсь изменить в CSS.

Как я могу составить список в идеальных столбцах, например. сделать заранее определенное пространство между каждым элементом, чтобы оно самоорганизовывалось?

Я пробовал испортить с заполнением и разметкой, но, похоже, это не трюк.

Answer 1

Вы можете установить <li> s на 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

окна можно использовать для 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>