使用填充错误换行-尝试在正确维护左边框的同时解决问题

Question

我有一个垂直的 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> 

感谢您提供有关如何解决此问题的任何建议！

Answer 1

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

Answer 2

这个怎么样？

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