Ссылка li на всю ширину ul как сделать с помощью CSS3 ?

Question

[Chvalov]

Как сделать чтобы ширина элемента растянулось на всю ширину при этом была кликабельной
s013.radikal.ru/i325/1411/22/f549715b9fa4.png

Answer 1

[Тимофей Белоусов]

ul li li{
     display:block;
}

ul li li a{
     display:block;
     height:100%;
}

Comments

[YemSalat]

зачем там ul li li ???

[Тимофей Белоусов]

ul li-1 уровень вложенности, ul li li-2 уровень вложенности и т.д.

[YemSalat]

Зачем?

[Тимофей Белоусов]

затем что например ul li{float:left; display:inline;} все дочерние li будут принимать значение родителя то есть ul li li li li li li li li будут иметь значение {float:left; display:inline;} , чтобы повлиять на какой-либо элемент ниже надо прописать ul li li {float:none; display: block;} понятно?
На рисунке ведь видно что пункт контакты находятся в пункте информация соответственно там ul li-это информация, а контакты это - ul li li

Answer 2

[YemSalat]

li > a { display: block; }

ничего другого не надо

Comments

[Тимофей Белоусов]

а если li уровнем выше со свойством inline-block? про это не думали?

[YemSalat]

Тимофей Белоусов: Это бы ничего не изменило - jsfiddle.net/srohn58m/1

Answer 3

[usupport]

css, но не 3 :) "li a" нужно, если клики там не по li(с помощью js), а по вложенным a
li, li a{display: block; width: 100%;}

Comments

[Chvalov]

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

Или подскажите как полностью сделать

[usupport]

А какова вообще конструкция? Может там еще между li и a span затесался, либо переопределено что-нибудь. Можно попробовать конструкцию "ul, li, li *{display: block;}". Гуглить можно по выпадающим меню, они там практически все такие, как нужно.

[Alexander Mischuk]

@usupport: Задавая блочное отображение не нужно указывать ширину в 100%, так как display: block это по-умолчанию делает сам.
Судя по картинке, то можно предположить, что li из первого уровня имеют inline-block, что наследуется для всех вложенных li и display: block для внутренних ссылок не срабатывает, потому что надо задавать display block так же для ul ul li

[YemSalat]

Alexander Mischuk: Фигню говорите, display не наследуется

[Alexander Mischuk]

@YemSalat: ul li {display: inline-block} не будет работать для ul li ul li?

[YemSalat]

Alexander Mischuk: С чего вы взяли что там ul li, а не ul > li ?
Если бы на втором уровне были li { display: inline-block; } или не имели заданной ширины - они бы не располагались друг под другом.

[YemSalat]

Alexander Mischuk И то что вы описываете не называется "наследованием"

[Alexander Mischuk]

Неужели ul > li не будет срабатывать для ul li ul li? Смею предложить, что все же дело в inline-block и элементах, которые не помещаются в ширину родителя, и перетекают на новую строку. Другого объяснения нет, как мне кажется, если не помогает задание блочного отображения для ссылок.

[YemSalat]

Alexander Mischuk: Прошу прощения, я имел ввиду случай когда родительский список "специально указан", например ul.top > li
Возможно там паддинг справа у li второго уровня из-за которого они перетекают на следующую строку.
В любом случае нужно смотреть html и css штобы разобраться что там не так, если даже li, li a {display: block;} не работает

[YemSalat]

ПС это конечно образный пример, т.к. у классов более высокая "specificity" чем у тэгов

[Alexander Mischuk]

@YemSalat: Я видел Ваш пример. Мало кто использует такое обилие дочерних селекторов в рабочих проектах.
Да и судя по форме вопроса, который тут задали, то автор прямо так и задал строку в стили. Ему надо было important туда вписать. Тогда заработало бы.
Время потрачено попусту.

[YemSalat]

Alexander Mischuk: мне кажется в реализации подобного меню дочерние селекторы могут быть очень кстати.
Насчет потраченного времени согласен, нужна нормалная система рэйтинга как на SO

Answer 4

[Артур]

li a {
    display: inline-block;
    width: 100%;
}