我正在構建一個導航欄并嘗試像在 bbc.com 站點中那樣進行操作 - 當滑鼠懸停在某個專案上時，會出現一個彩色邊框。我是用類似的東西做的
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.cont {
display:flex;
border: 1px solid gray;
background-color: black;
/* font-family: Arial, Helvetica, sans-serif; */
/* height: 2em; */
/* border-radius:5px; */
}
a {
margin-right:0.1em;
border: 1px gray;
border-style: none none none solid;
padding: 0.5em;
color: white;
}
/* #nav1 {
border-style: none none none solid;
margin-left: 3em;
} */
#nav2:hover {
/* border: 3px solid red; */
border-bottom: 3px solid red;
cursor:pointer;
}
#nav4 {
border-style: none solid none solid;
margin-right: 5em;
}
<div class="cont">
<a id="nav1">Home</a>
<a id="nav2">News</a>
<a id="nav3">Contact</a>
<a id="nav4">About</a>
<button id="button1">Sign in</button>
</div>
但是當您將滑鼠放在 #nav4 專案上時，整個黑色背景會拉伸以顯示紅色邊框。為什么會這樣？我認為 'box-sizing: border-box;' 應該阻止它。
（第二個注意事項，如何將按鈕放在頁面的右上角以適用于任何螢屏尺寸的方式？）
uj5u.com熱心網友回復：
添加邊框時，您將添加到元素的高度。
有兩種方法可以避免這種情況：
添加3px的黑色邊框的每個元素，只改變其顏色 時
:hover指定
box-sizing: border-box;一個高度，所以元素的高度包括邊框（和填充）
uj5u.com熱心網友回復：
我在偽元素之后使用了絕對定位，而不是使用border.
記住Box 模型邊框在內容之外。
代碼筆
uj5u.com熱心網友回復：
這是一種僅使用邊框 css 的方法：
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.cont {
display: flex;
border: 1px solid gray;
background-color: black;
/* font-family: Arial, Helvetica, sans-serif; */
/* height: 2em; */
/* border-radius:5px; */
}
a {
margin-right: 0.1em;
border: 1px gray;
/* border-style: none none none solid; */
border-bottom: 3px solid black;
border-top: 3px solid black;
padding: 0.5em;
color: white;
}
/* #nav1 {
border-style: none none none solid;
margin-left: 3em;
} */
#nav2:hover {
/* border: 3px solid red; */
border-bottom: 3px solid red;
cursor: pointer;
}
#nav4 {
/* border-style: none solid none solid; */
margin-right: 5em;
}<div class="cont">
<a id="nav1">Home</a>
<a id="nav2">News</a>
<a id="nav3">Contact</a>
<a id="nav4">About</a>
<button id="button1">Sign in</button>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/381648.html
上一篇：如何覆寫scss中的地圖合并？
下一篇：單擊按鈕添加評論框