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

Question

我有一个垂直的 ul 作为导航菜单。当 a:hover 被触发时，border-left 会出现在屏幕的边缘，并且填充会被调整，这样文本就不会移位。很普通的菜单效果。效果很好，除非用户将屏幕大小调整到导航菜单项分成两行的位置 - 然后第二行没有填充，将其拉到左侧。我需要找到一种方法将填充均匀地应用到整个 li，即使线被打破，同时保持我的 border-left 效果!

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