CSS Колонны на UL против DIV

Почему выход дляCSS Колонны на UL против DIV

<div class="tcol"> 
    <ul> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    </ul> 
</div>

отличается от

<div> 
    <ul class="tcol"> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    </ul> 
</div>

с этим CSS?

.tcol 
{ 
    -moz-column-count: 3; 
    -moz-column-gap: 20px; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 20px; 
    column-count: 3; 
    column-gap: 20px; 
}

Я не понимаю, почему создается пустая строка.

Как я могу удалить пустую строку в первом списке или получить точки маркера во втором?

Live demo is here.

источник

2013-04-26 laktak

Элементы имеют стили по умолчанию, браузеры применяют эти стили по умолчанию, если вы их конкретно не определяете.

Рекомендуется применять сброс CSS для ваших проектов, а затем определять стили так, как вам нужно.

Вот хороший источник для начала:
http://meyerweb.com/eric/tools/css/reset/

Например, в вашем случае FireFox оказывает 16px верхнюю и нижнюю границу для (блочной модели по умолчанию) UL элемента.

источник

2013-04-26 08:00:23 Arbel

Я не согласен. Я не думаю, что это хорошая практика для использования сбросов CSS. Я рекомендую прочитать [одну хорошую статью] (http://sixrevisions.com/css/should-you-reset-your-css/) против сброса CSS, но также http://stackoverflow.com/questions/167531/is-it -ok-to-use-a-css-reset-stylesheet, который представляет стороны обсуждения. – andyb

@andyb, в то время как я уважаю ваше мнение, большинство упомянутых «вниз» использования сброса CSS, как говорят, «забывают поместить надлежащую замену стилям сброса» (для презентации, для пользователей клавиатур), а также увеличенный размер стилей. Это можно преодолеть с помощью хорошо написанных стилей. – Arbel

Извините, я не уверен, что правильно понимаю вашу точку зрения, поскольку, по-моему, вы также не рекомендуете сброс CSS. Я согласен, что хорошо написанные стили часто отрицают необходимость сброса CSS, но иногда они полезны, например, перезагрузка Twitter Bootstrap. – andyb

Добавить margin:0 в уль

.tcol 
{ 
    -moz-column-count: 3; 
    -moz-column-gap: 20px; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 20px; 
    column-count: 3; 
    column-gap: 20px; 
} 
ul{ 
    margin:0 
}

DEMO

источник

2013-04-26 07:49:16 Sowmya

Благодаря браузера Нарезка <li> в колонны, list-style-type были вытеснены из нормального зрения. Вы можете исправить это, добавив list-style-position: inside; к вашему tcol.

Существует также очень заметная разница между двумя макетами, не считая отсутствующего типа стиля списка. С помощью панели Элементы в Chrome и зависании каждого <ul> и <li> вы можете увидеть, как браузер размещает содержимое столбца.

Вторая версия вашей разметки кажется более «правильной», при этом контейнер правильно включает элементы списка.

источник

2013-04-26 08:00:09 andyb

CSS Колонны на UL против DIV

ответ

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