Question

我意识到边框包装内容但是可以使它接近的元素的底边界百分比？还可以将边界长度减小设定像素，即-20px。

nav li {
display: inline-block;
*display: inline; /*For Internet Explorer 7*/
*zoom: 1; /*For Internet Explorer 7*/
padding: 10px;
font-family: "Changa One" , Cursive;
font-size: 1em;
}

nav li:hover {
border-bottom: 1px solid orange;
padding-bottom: 3px;    
}

当我悬停时，我希望底部边框（udnerline）减少20px，因为我的填充将列表元素间隔20px（两边10px）。任何答案都非常感谢！

Answer 1

如果您不希望边框显示在元素之间的空间上，则可以使用边距来分隔元素而不是填充。

关于另一个问题，我认为你不能使用％作为边界。

Answer 2

也许会有所帮助

http://jsfiddle.net/jk43ej0g/

＆＃13;

{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

nav{}
nav li {
display: inline-block;
*display: inline; /*For Internet Explorer 7*/
*zoom: 1; /*For Internet Explorer 7*/
padding: 10px;
font-family: "Changa One" , Cursive;
font-size: 1em;
}



nav li a{
    display: block;
    text-decoration: none;
    color: #000;
}

nav li:hover a{
    border-bottom: 1px solid orange;
    padding-bottom: 3px;    
}

＆＃13;

<nav>
    <ul>
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 10</a></li>
        <li><a href="#">Menu 100</a></li>
        <li><a href="#">Menu 1000</a></li>
        <li><a href="#">Menu 1000</a></li>
    </ul>
</nav>

＆＃13;

更改CSS中的边框长度

2 个答案: