Question

我有一个垂直ul作为导航菜单。当a：触发悬停时，屏幕边缘会显示一个边框左边，并调整填充以使文本不会移位。很常见的菜单效果。效果很好，除非用户将屏幕大小调整到导航菜单项分为两行的位置 - 然后第二行没有填充，将其拉到左侧。我需要找到一种方法将填充均匀地应用于整个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>

感谢有关如何解决这个问题的任何建议！

Answer 1

this怎么样？

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

Answer 2

用div包裹a：

<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/

使用<li>换行填充错误 - 尝试在正确维护左边框时解决</li>

2 个答案: