HTML/CSS 导航栏对齐和背景颜色不起作用答案

【问题标题】：HTML/CSS Navbar Align and Background Color Not WorkingHTML/CSS 导航栏对齐和背景颜色不起作用
【发布时间】：2021-11-16 07:49:42
【问题描述】：

故事和我的目标：
我刚刚完成了完整的 HTML 和 CSS 课程，显然我决定要做一个网站。虽然这样做有一些问题，但能够自己解决。这个我很好奇。我尝试在div 标签内添加style="background-color: black;"。我也尝试了多种方法，但它似乎没有在导航栏的左右按钮之间着色。我在下面附上了以下内容，我的 Css 文件、HTML 文件 和 源输出 的图像。我可能会放屁，但我只是需要帮助。

CSS 文件：

ul {
    position: fixed;
    top: 0;
    left: 0;
    list-style: none;
    display: inline-flex;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

li:last-child {
    position: fixed;
    top: 0;
    right: 0;
}

li a {
    display: block;
    text-align: center;
    text-decoration: none;
    color: white;
    background-color: black;
    padding: 10px 11px;
    font-size: 25px;
    font-weight: bold;
    font-family: Arial;
}

li a:hover {
    background-color: gray;
}

HTML 文件：

<!DOCTYPE html>
<html>
    <head>
        <title>Index</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div>
            <ul>
                <li>
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a href="about.html">About</a>
                </li>
                <li>
                    <a href="languages.html">Languages</a>
                </li>
                <li>
                    <a href="support.html">Support</a>
                </li>
                <li>
                    <a href="https://puginarug.com">An Amazing Website</a>
                </li>
            </ul>
        </div>
    </body>
    <br>
    <h1>index.html</h1>
</html>

输出：

【问题讨论】：

标签： html css web navbar

【解决方案1】：

设置ul宽度为100%，然后添加background-color: black

ul {
position: fixed;
top: 0;
left: 0;
list-style: none;
display: inline-flex;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%; 
background-color: black;
}

只需从 li a 选择器中删除背景颜色，你应该会很好。

【讨论】：

感谢这有很大帮助！我认为如果有意义的话，将 li 标签一直放在右边会扩展它而不是分开它。
是的，一开始我也很困惑。因此，我使用了开发工具并能够很快发现问题（codecademy.com/articles/use-devtools）。很高兴这一切都为你解决了??