Ошибка заполнения с переносом строки ‹li› — попытка устранить ее при правильном сохранении левой границы

У меня есть вертикальная ul в качестве навигационного меню. Когда срабатывает a:hover, на краю экрана появляется левая граница, а отступ настраивается так, чтобы текст не смещался. Довольно распространенный эффект меню. Работает хорошо, за исключением случаев, когда пользователь изменяет размер экрана до такой степени, что элементы навигационного меню разбиваются на две строки, тогда во второй строке нет отступов, вытягивая ее влево. Мне нужно найти способ применить заполнение одинаково ко всему li, даже если линия разорвана, сохраняя при этом эффект границы слева!

Я просмотрел некоторые ответы на аналогичные проблемы в stackoverflow, но все они, похоже, включают удаление заполнения из li и вместо этого применяют его к ul или содержащему элементу. Если я это сделаю, то потеряю позиционирование на выделении левой границы - граница отображается прямо рядом с текстом, и я не могу понять, как манипулировать отступом на границе отдельно от li, чтобы вернуть ее обратно !

Вот css:

#middle_left ul {
    list-style: none;
    padding-top:5%;
    font-family: 'Gill Sans', Verdana, Arial, 'Liberation Sans', FreeSans, sans-serif;
    font-size:1.5em;
}

#middle_left ul a {
    padding-left:15px;
    text-decoration: none;
    color: #2e2f2a;
}

#middle_left ul a:hover {
    padding-left:12px;
    color: #81827f;
    border-left: solid 3px #81827f;
}

И HTML:

<div id="middle_left">
    <ul>
        <li><a href="#">The Novel</a></li>
        <li><a href="#">Bio</a></li>
        <li><a href="#">Translation</a></li>
        <li><a href="#">Other Works</a></li>
    </ul>
</div>

Спасибо за любые предложения, как решить эту проблему!


html padding alignment css html-lists
person Ila    schedule 22.07.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Оберните a в div:

<div id="middle_left">
<ul>
    <li><div><a href="#">The Novel</a></div></li>
    <li><div><a href="#">Bio</a></div></li>
    <li><div><a href="#">Translation</a></div></li>
    <li><div><a href="#">Other Works</a></div></li>
    </ul>
</div>

    #middle_left ul {
list-style: none;
padding-top:5%;
    padding-left: 15px;
font-family: 'Gill Sans', Verdana, Arial, 'Liberation Sans', FreeSans, sans-serif;
font-size:1.5em;
}

#middle_left ul div{
    padding-left:15px;
    text-indent: -15px;

}

#middle_left ul div:hover{
    padding-left:15px;
    text-indent: -15px;
    border-left: solid 3px #81827f;

}

#middle_left ul a {
padding-left:15px;
text-decoration: none;
color: #2e2f2a;
}

#middle_left ul a:hover {
padding-left:12px;
color: #81827f;
}

См. здесь, например:

http://jsfiddle.net/6nz9F/2/

person Semyazas    schedule 22.07.2011
comment
Пожалуйста. Не хочу быть невежливым, но даже если вы все еще ждете правильного ответа, по крайней мере, ваш голос будет оценен :-) - person Semyazas; 23.07.2011
comment
Я бы сделал, если б мог! Я новичок в Stack Overflow, и у меня недостаточно репутации, чтобы голосовать! Все, что я могу предложить, это искренняя признательность. Я использую эту структуру кода на живом сайте, и она работает очень хорошо. Это не плюс, но уже что-то, верно? - person Ila; 12.08.2011

arrow_upward
1
arrow_downward

Как насчет этого?

CSS

#middle_left ul {    
    list-style: none;
    padding-top: 5%;
    padding-left:12px;
    font-family: 'Gill Sans', Verdana, Arial, 'Liberation Sans', FreeSans, sans-serif;
    font-size: 1.5em;
}

#middle_left ul a {
    display: block;
    text-decoration: none;
    color: #2e2f2a;
    border-left: 3px solid transparent;
}

#middle_left ul a:hover {
    color: #81827f;
    border-left-color: #81827f;
}
person Shef    schedule 22.07.2011