CSS a:hover 边框底部长度答案

【问题标题】：CSS a:hover border-bottom lengthCSS a:hover 边框底部长度
【发布时间】：2012-12-25 15:28:33
【问题描述】：

谁能帮助我，告诉我为什么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 之上（水平，居中）

非常感谢！

【问题讨论】：

标签： html css text border underline

【解决方案1】：

边框应用于元素在页面中创建的框，因此它也将继续到您应用的任何填充的边缘。

如果您只希望文本下划线，请使用text-decoration: underline;

另外，您的标记无效。 <ul> 只能包含 <li>，因为它是直接子级。在列表元素内移动超链接。

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

【讨论】：

谢谢！调整
和后工作正常！

@user1968801 NP。我建议，如果您对有效 HTML 的构成有点了解，您可以考虑前往 reference.sitepoint.com/html 或 developer.mozilla.org/en-US/docs/HTML - 两者都是学习 Web 开发基础知识所需的大部分内容的良好参考。