CSS - Центр выравнивать список нескольких строк

Я хотел бы централизованно согласовать список нескольких строк в DIV:CSS - Центр выравнивать список нескольких строк

В этом примере я установить фиксированную ширину на ul, чтобы продемонстрировать чего я хочу достичь. Однако мне нужно, чтобы ширина ul была динамической, так что она просто содержит элементы списка (которые являются фиксированной шириной), т. Е. Сжимаются до соответствия. Каждая строка элементов списка должна начинаться слева и вставлять столько элементов, сколько возможно, перед тем, как перейти к новой строке.

div является переменной шириной, так, например, если div был немного шире, она будет выглядеть следующим образом:

http://jsfiddle.net/8Wu2S/1/

Я пробовал все виды, но это, кажется, много сложнее, чем я думал!

источник

2013-02-10 Dr Otter

мне удалось найти по существу ту же проблему:

CSS - how to make DIV with wrapped floats inside only be as large as it needs to be to hold the floats?

Оказывается, нет хорошего решения. Один из способов - использовать медиа-запросы для установки ширины ul. Другой способ - использовать плагин jQuery, такой как Masonry.

В любом случае, я, вероятно, собирался использовать масонство на своем сайте, поэтому я думаю, что поеду по этому маршруту, а пользователи, не являющиеся javascript, вернутся к нецентральному расположению.

источник

2013-02-11 00:11:45

ul { 
    background-color: red; 
    width: 80%; 
    margin: 0 auto; 
} 
li { 
    display: inline-block; 
    width: 49%; 
    border: 1px solid black; 
}

Я использовал 49%, но вы можете использовать CSS box-sizing: border-box, чтобы избежать этого и использовать твердый 50%.

источник

2013-02-10 01:19:51 Leeish

Я также должен был указать, что список должен соответствовать как можно большему количеству элементов списка для каждой строки, прежде чем перейти к следующей строке, например: http://jsfiddle.net/8Wu2S/1/ Я только что редактировал вопрос, чтобы сделать что-то немного яснее. –

Ваши ли всегда кратные 100px? Или это только для демонстрационных целей? Должен ли УЛ иметь фон? Все ли они одинаковой ширины? – Leeish

Просто измените ширину лития от 49% до 100 пикселей или что-то еще. UL всегда будет составлять 80% или любую максимальную ширину для родительского div. Без фона вы не можете сказать. – Leeish

Установить элементы ul и li для отображения встроенного.

<div style="width:20%;"> 
    <ul style="display:inline;"> 
     <li style="display:inline;">Foo</li> 
     <li style="display:inline;">bar</li> 
    </ul> 
</div>

jsFiddle пример: http://jsfiddle.net/QcNTW/4/

источник

2013-02-10 01:21:50 Neiliux

Pretty уверенный, что он хочет, чтобы ul была только шириной лиза. Ваш пример равен 100%, если родительский. – Leeish

Да, как сказал Лииш, 'ul' должен быть только шириной' li', содержащейся внутри. Мне сложно объяснить, чего я пытаюсь достичь! –

Да, я пропустил это. Я обновил пример, чтобы установить как элементы ul, так и li для рендеринга как встроенные, но я не думаю, что это дает вам именно то, что вы ищете. – Neiliux

CSS - Центр выравнивать список нескольких строк

ответ

Смежные вопросы