Почему CSS для тега внутри тега li приводит к тому, что li не расширяется вертикально, чтобы содержать его содержимое?

Question

У меня есть <div> с ID #left, который еще один <div> с ID #container. Внутри #container находится <ul>.

Я думал, что по умолчанию будет установлено, что <li> будет вертикально расширяться, чтобы содержать в себе любой текст. Но это не так. Это CSS:

#left { 
    width:200px; 
} 
#container { 
    margin: 0 6px; 
    overflow:hidden; 
} 

#container li { 
    background:greenyellow; 
    position: relative; 
    border: #BF0000 thin solid; 
    margin: 0 0 12px 0; 
    -webkit-border-radius: 6px; 
    border-radius: 6px; 
    clear:both; 
} 
#container li:hover { 
    background: #ffffff; 
} 
#container a { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
} 

По using jsFiddle, я обнаружил, что это <a> тег, и что-то о его свойства CSS, что нарушает высоту моего <li> тега. Однако, если я изменю <a>, я потеряю другой эффект, который я хочу, чтобы иметь возможность щелкнуть в любом месте <li> и активировать ссылку.

Могу ли я получить <li>, чтобы развернуть по вертикали, а также тег <a>, чтобы заполнить все <li>? Я не понимаю, почему <a> должен повлиять на то, как это делается прямо сейчас.

Answer 1

Что я понимаю, что вы хотите, чтобы ваш li правильно обернул ваш тег, в то время как тег может расти по высоте на основе контента. если это так, пожалуйста, посетите http://jsfiddle.net/jBvQ8/16/ для решения.

Если вам нужна какая-либо модификация или другой вариант использования, я буду обновлять этот jsfiddle.

#left { 
    width:200px; 
} 
#container { 
    margin: 0 6px; 
} 

#container li { 
    background:greenyellow; 
    position: relative; 
    border: #BF0000 thin solid; 
    margin: 0 0 12px 0; 
    -webkit-border-radius: 6px; 
    border-radius: 6px; 
    clear:both; 
} 
#container li:hover { 
    background: #ffffff; 
} 
#container a { 
    display:block;  
    width: 100%; 


} 

Answer 2

Я не уверен, что вы хотите, но, возможно, вы хотите, чтобы целое <a> было внутри li с применением CSS.

просто удалить position:absolute из CSS в anchor теге т.е.

#container a { 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
} 

посмотреть fiddle

и если вы хотите pointer курсор, при наведении li с anchor, просто указать HREF тега (даже href='#') к якорям

см. Этот fiddle для интерактивных якорей