Ошибка заполнения с переносом строки <li>- попытка исправить при правильном поддержании левой границы - PullRequest
Новая
       56

Ошибка заполнения с переносом строки <li>- попытка исправить при правильном поддержании левой границы

2 голосов
/ 22 июля 2011

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

Я рассмотрел некоторые ответы на похожие проблемы в stackoverflow, но все они, кажется, включают удаление padding из 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>

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

Ответы [ 2 ]

1 голос
/ 22 июля 2011

Оберните 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/

1 голос
/ 22 июля 2011

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

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;
}
...