谁能告诉我为什么 a:hover { border-bottom: 2px; 可以帮助我吗？ } 继续超过链接本身的长度？
body {
margin: 0;
font-family: "Georgia", "Times New Roman", "Times", "serif";
}
header {
background-color: #191919;
padding: 56px;
text-align: center;
}
div {
display: inline;
}
ul {
list-style-type: none;
display: inline;
color: #ffffff;
}
li {
display: inline;
margin-right: 28px;
width: 135px;
}
a {
text-decoration: none;
color: #ffffff;
}
a:hover {
border-bottom: 2px solid #ac9962;
font-size: 18px;
}
a:active {
border-bottom: 2px solid #ac9962;
font-size: 18px
}
<!DOCTYPE HTML>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
</head>
<body>
<header>
<nav>
<ul>
<a href="www.youtube.com"><li>Menu 1</li></a>
<a href="www.youtube.com"><li>Menu 2</li></a>
<a href="www.youtube.com"><li>Menu 3</li></a>
<a href="www.youtube.com"><li>Menu 4</li></a>
<a href="www.youtube.com"><li>Menu 5</li></a>
<a href="www.youtube.com"><li>Menu 6</li></a>
<a href="www.youtube.com"><li>Menu 7</li></a>
<a href="www.youtube.com"><li>Menu 8</li></a>
</ul>
</nav>
</header>
</body>
</html>
奖励:
我也无法将菜单 1 - 菜单 4 置于菜单 5 - 菜单 8 之上(水平、居中)
非常感谢!
最佳答案
边框应用于该元素在页面中创建的框，因此它也将继续到您应用的任何填充的边缘。
如果您只想给文本加下划线，请使用 text-decoration: underline;
此外，您的标记无效。 <ul>只能包含 <li>因为它是直接的 child 。将您的超链接移动到列表元素内。
<ul>
<li><a href="www.youtube.com">Menu 1</a></li>
<li><a href="www.youtube.com">Menu 2</a></li>
<li><a href="www.youtube.com">Menu 3</a></li>
<li><a href="www.youtube.com">Menu 4</a></li>
<li><a href="www.youtube.com">Menu 5</a></li>
<li><a href="www.youtube.com">Menu 6</a></li>
<li><a href="www.youtube.com">Menu 7</a></li>
<li><a href="www.youtube.com">Menu 8</a></li>
</ul>
关于html - CSS :hover border-bottom length，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14271550/