Несколько вопросов по ul>li>li

[Temik2704]

Приветствую всех!

Пример того что я хочу получить http://cs322217.vk.me/v322217856/4ff9/1jIuUfxmnx0.jpg

Мой код http://cssdesk.com/vNVjG

 

Собственно мои вопросы:

1.Почему моя li с черным потом уезжает направо,ведь я задавал padding справа для него в блоке ul в 9px

2.Почему не отображаются блоки ul>li>li т.е. li вложенные в li?

3.На верном ли я пути к осуществлению задачи?

[rus]

так не правильно:

	<li>		<li></li>		<li></li>		<li></li>		<li></li>	</li>

вот так - правильно:

	<li>             <ul>		<li></li>		<li></li>		<li></li>		<li></li>             </ul>	</li>

возможно тут найдете ответ на свой вопос: http://htmlforum.ru/index.php?showtopic=13589

[Temik2704]

А как-нибудь можно реализовать данный пример использую просто список без вложенных списков? т.е. 

<ul>
<li></li>
<li></li>
<li></li>
...
</ul>

 

Натолкните на мысль.В основном интересует как задать нижний и верхний бордеры так чтобы они были на всю длинну ul (бордеры которые разделяют строки из каждых 4 li)

Также не понимаю почему при задании высоты,ширины элементу li и правых и левых padding ему же,блок не просто освобождает пространство на эти самые padding вокруг себя,а просто разъезжается и ставится шириной width+padding

Им задано inline-block;

[caprella]

Вот, можете глянуть такой вариант http://jsfiddle.net/caprella/Srrjj/. Как по мне, не самый элегантный, но другого способа не придумала

 

Я его предлагала на stackoverflow, там вроде похожая проблема была.

Также не понимаю почему при задании высоты,ширины элементу li и правых и левых padding ему же,блок не просто освобождает пространство на эти самые padding вокруг себя,а просто разъезжается и ставится шириной width+padding

 

 

Это после того, как вы исправили код по совету rus?

[SelenIT]

Можно нарисовать линии псевдоэлементами каждого 4-го блока (исключая IE8-), наподобие такого (выше предложили почти то же самое )  Чтобы сказать что-то более определенное, желательно уточнить задачу (откуда этот список берется, можно ли разбить его на несколько, добавить классы и т.п.)

 

 

 

почему при задании высоты,ширины элементу li и правых и левых padding ему же,блок не просто освобождает пространство на эти самые padding вокруг себя,а просто разъезжается и ставится шириной width+padding

Так и должно быть. padding — это внутренний отступ (в отличие от margin).

Edited November 14, 2013 by SelenIT

[Z1gnet]

Также не понимаю почему при задании высоты,ширины элементу li и правых и левых padding ему же,блок не просто освобождает пространство на эти самые padding вокруг себя,а просто разъезжается и ставится шириной width+padding Им задано inline-block;

 

тебе нужен не паддинг, а марджин. вот тут почитай http://htmlbook.ru/samlayout/blochnaya-verstka/blochnaya-model

 

А как-нибудь можно реализовать данный пример использую просто список без вложенных списков?

 

как вариант вставлять пустую li и на нее делать эту линию (хотя не самый лучший)

если есть возможность вешать класс на каждую 4-ю (5-ю) li то от этого класса на :before или :after сделать линию

[Temik2704]

Всем спасибо за ответы!

 

Можно нарисовать линии псевдоэлементами каждого 4-го блока (исключая IE8-), наподобие такого (выше предложили почти то же самое )  Чтобы сказать что-то более определенное, желательно уточнить задачу (откуда этот список берется, можно ли разбить его на несколько, добавить классы и т.п.)

 

 

 

почему при задании высоты,ширины элементу li и правых и левых padding ему же,блок не просто освобождает пространство на эти самые padding вокруг себя,а просто разъезжается и ставится шириной width+padding

Так и должно быть. padding — это внутренний отступ (в отличие от margin).

 

Я использовал ваш пример.Но мне понятны некоторые детали из него,если вам не трудно,объясните кратко пожалуйста.

1.Что в этом примере делает font-size:0? Если его убрать,то заполняется немного места...Откуда оно?Ведь текста тут нет.

2.Зачем мы задаем ul - position:relative;?

3.Почему мы задаем position:relative; всем li кроме каждого четвертого?

4.Почему если каждый 4ый li будет relative то нижний бордер исчезает?

[SelenIT]

1. Текст есть, хоть и невидимый — переносы строк между тегами (при display:inline-block они воспринимаются как пробелы между словами). Обнуление размера шрифта у контейнера делает их невидимыми.

 

2. Это делает ul началом отсчета для псевдоэлементов, рисующих гориз. границы. Их left и right отсчитываются от него. А top, поскольку не задан, считается от границы li (если координата при absolute не указана, элемент помещается по этой координате туда, где он находился бы без absolute).

 

3, 4. Если задать relative для каждого 4-го li, то началом отсчета для его псевдоэлемента будет не ul, а он сам. И не получится привязать left и right псевдоэлемента к контейнеру.