Простыни с ребенком и без него

Question

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

У меня есть неупорядоченный список, в котором элементы списка может содержать якорь, если это так, я хочу, чтобы все тело видимого элемента, чтобы быть интерактивным (другими словами, якорь должен занимать ширину и высоту 100% элемента списка), однако, если нет привязки, элемент списка должен по-прежнему иметь ту же высоту/ширину, что и другие элементы списка.

HTML

<ul> 

    <li>Index</li> 
    <li><a href=''>Home</a></li> 
    <li>FAQ</li> 

</ul> 

CSS

ul { padding:0; margin:0; width: 200px; background: lightgray; } 

li { padding: 20px; border: solid black; } 

li a { display: block; } 

DEMO

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

Answer 1

Если я ставлю отступы на то элементы без ребенка не имеют отступы, если я положил его на обе тогда элементы с ребенком становятся жирнее

Ну, а затем отправить их на диету - путем изменения «откорм» эффект отступа по ссылкам отрицательным запасом на ту же сумму:

li a { display:block; margin:-20px; padding:20px; background:red; } 

http://jsfiddle.net/rph4bg0j/11/

(Красный backgr ound добавлен, поэтому эффект появляется напрямую.)