邊界底部問題（懸停時向下擴展）

我正在研究導航，我似乎無法弄清楚如何使底部邊界向上增大，而不是向下擴展（反過來擴展我的頭像有幾個像素），我可以通過設置高度來修正擴展頭部，但是邊框仍然會向下延伸而不是向上。邊界底部問題（懸停時向下擴展）

的CSS：

header { 
    margin: 0; 
    padding: 0; 
    left: 0; 
    top: 0; 
    width: 100%; 
    position: absolute; 
    background: #000000; 
} 
ul { 
    list-style-type: none; 
    display: block; 
    margin: 0 0 0 20px; 
    padding: 0; 
} 
ul li { 
    display: inline-block; 
    padding: 0; 
} 
ul li a{ 
    display: block; 
    border-bottom: 1px solid #fff; 
    font-size: 19px; 
} 
ul li a:hover{ 
    border-bottom: 2px solid #fff; 
    background: #333; 
    font-size: 19px; 
}

的HTML：

<header> 
    <ul id="nav"> 
    <li><a href="">link 1</a></li> 
    <li><a href="">link 2</a></li> 
    <li><a href="">link 3</a></li> 
    </ul> 
</header>

的的jsfiddle：

http://jsfiddle.net/Artsen/EZWvF/

來源

2013-05-04 Artsen

所以，你要增加邊框底部到頂部，右？

我實際上不得不爲最近一個網站做這個。除了設置特定的填充和邊框屬性之外，沒有別的辦法。

我編輯您的jsfiddle這裏：http://jsfiddle.net/EZWvF/2/（改變了一些屬性，使測試用例更可見）

其原理是：交換的像素值填充，底部和懸停邊框底部。 這些都是關鍵行到你的解決方案：

ul li a { 
border-bottom: 1px solid white; 
padding-bottom: 5px; 
} 
ul li a:hover { 
border-bottom: 5px solid white; 
padding-bottom: 1px; 
}

注意：如果不添加CSS過渡這隻作品。如果您不引用我放入小提琴的css-transition，您會看到div仍然展開到底部。如果你想要一個ss轉換，你需要添加一個單獨的div到li的模擬邊界。

來源

2013-05-04 12:04:07 Tyblitz

非常感謝你，昨天晚上我把頭髮拉出來。 – Artsen 2013-05-04 20:43:00

甚至2年後，你讓我的一天，謝謝！ – sym 2015-09-04 07:57:07

由於Tyblitz建議使用額外的填充值：hover在您不需要轉換時效果很好。

如果您需要過渡並且不想引入額外的div，您可以使用行高/高度方法來控制垂直高度。的

所以不是這樣：

.nav-element a { 
    color: gray; 
    padding: 25px 15px; 
    transition: all ease-in-out 0.2s; 
    display: block; 
    text-decoration: none; 
}

做到這一點：

.nav-element a { 
    color: gray; 
    padding: 0 15px; 
    line-height: 70px; 
    height: 70px; 
    transition: all ease-in-out 0.2s; 
    display: block; 
    text-decoration: none; 
}

見例如其中不工作here 和不工作（使用行高/高）

來源

2015-02-24 06:07:31 ambidexterous

邊界底部問題（懸停時向下擴展）

回答

相關問題