时间戳

首页 > 解决方案 > HTML/CSS 导航栏对齐和背景颜色不起作用

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

问题描述

故事和我的目标：
很明显，我刚刚完成了完整的 HTML 和 CSS 课程，并决定要做一个网站。虽然这样做有一些问题，但能够自己解决。这个我很好奇。我试过style="background-color: black;"在div标签内添加一个。我也尝试了多种方法，但它似乎没有在导航栏的左右按钮之间着色。我在下面附上了以下内容，我的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>

输出： 输出

标签： htmlcsswebnavbar

解决方案

设置 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 选择器中删除背景颜色，您应该会很好。

推荐阅读