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

Question

故事和我的目标：
我刚完成完整的 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>

输出：

Answer 1

将 ul 宽度设置为 100%，然后添加背景颜色：黑色

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 选择器中删除背景颜色，就可以了。

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

HTML/CSS Navbar Align and Background Color Not Working

html

css

navbar

web