Блог

Главная - Вопросы по программированию - Выравнивание навигационной панели HTML/CSS и Цвет фона Не работают

Выравнивание навигационной панели HTML/CSS и Цвет фона Не работают

#html #css #web #navbar

Вопрос:

История и То, к Чему Я Стремлюсь:

Я только что закончил полный курс 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>

Выход:
Выход

Ответ №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, и все будет хорошо.

Комментарии:

1. Спасибо, это очень помогло! Я думал, что наличие тега li справа полностью расширит его, а не разделит, если это имеет смысл.

2. Да, я тоже сначала был в замешательстве. Поэтому я вытащил инструменты разработки и смог довольно быстро обнаружить проблему ( codecademy.com/articles/use-devtools ). рад, что у тебя все получилось 👍 🏻

Метки: