我想在導(dǎo)航欄中的活動(dòng)鏈接和懸停鏈接上設(shè)置邊框底部。@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&family=Quantico:wght@400;700&display=swap");* { box-sizing: border-box; margin: 0; padding: 0;}body { font-family: "Open Sans", sans-serif;}h1,h2,h3,h4,h5,h6 { font-family: "Quantico", sans-serif;}a { font-family: "Quantico", sans-serif; text-decoration: none; color: #111;}ul { list-style: none;}/* Theme */.container { max-width: 1200px; margin: 0 auto;}.main-color { color: #009603;}/* Nav */nav { padding: 20px 0; overflow: hidden;}nav h1 { float: left; font-size: 30px; text-transform: uppercase;}nav ul { float: right; line-height: 2.5;}nav ul li { float: left; margin-right: 30px;}nav ul li a { font-weight: 700; text-transform: uppercase; padding: 30px 8px;}nav ul li a:active,a:hover { border-bottom: #009603 3px solid;}<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Pacocha | Garden Projects</title> <link rel="stylesheet" href="css/style.css" /> <script src="https://kit.fontawesome.com/1685e275a4.js" crossorigin="anonymous" ></script> </head> <body> <header> <nav> <div class="container"> <a href="index.html"> <h1><i class="fas fa-leaf main-color"></i> Pacocha</h1> </a> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="services.html">Services</a></li> </ul> </div> </nav> </header> </body></html>但正如您在我的代碼片段中看到的 - 我的邊框是 1 像素而不是 3 像素。為什么？我不知道更多細(xì)節(jié)我可以添加。這是填充物的隨機(jī)文本，因?yàn)槲蚁嘈艈?wèn)題已經(jīng)很清楚 這是填充物的隨機(jī)文本，因?yàn)槲蚁嘈艈?wèn)題已經(jīng)很清楚了
2 回答
qq_遁去的一_1
TA貢獻(xiàn)1725條經(jīng)驗(yàn) 獲得超8個(gè)贊
您overflow: hidden的nav，它隱藏了部分邊框，因此您可以嘗試增加填充或減少導(dǎo)航的高度來(lái)解決它。
繁星點(diǎn)點(diǎn)滴滴
TA貢獻(xiàn)1803條經(jīng)驗(yàn) 獲得超3個(gè)贊
對(duì)于底部的邊框，您只需使用border-bottom: 2px solid red;
例子
a {
color: #fff;
background: #333;
padding: 5vh;
border-bottom: 5px solid #4caf5c;
}
a:hover{
border-bottom: 5px solid red;
}
<a>this is a link</a>
- 2 回答
- 0 關(guān)注
- 152 瀏覽
添加回答
舉報(bào)
0/150
提交
取消