在 CSS 中更改边框长度

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) 减少 20 像素，因为我的填充将列表元素间隔 20 像素（两侧 10 像素）。非常感谢任何答案！

Answer 1

如果您不想在元素之间的 space 上显示边框，则可以对元素 space 使用边距而不是填充。

关于另一个问题，我认为您不能使用 % 作为边框。

Answer 2

也许会有帮助

http://jsfiddle.net/jk43ej0g/

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

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

在 CSS 中更改边框长度

Changing the border length in CSS

html

css

border