Невозможно использовать CSS для стилизации неупорядоченного списка в качестве панели навигации

Question

.navbar {
    background-color: 595959;
    color: #ffffff;
    list-style: none;
}

<ul class = "navbar"> 
    <li><a href = "#">Home</a></li>
    <li><a href = "#">About Us</a></li>
    <li><a href = "#">Our Projects</a></li>
    <li><a href = "#">Contact Us</a></li>
    <li><a href = "#">Donate</a></li>
</ul>

Независимо от того, что я делаю в своей таблице стилей CSS, для стилизации панели навигации ничего не меняется.В приведенном выше коде я попытался удалить маркеры в стиле списка, но ничего не изменилось, как показано на фотографии.Кажется, что никакие команды CSS не имеют никакого значения в неупорядоченном списке.

Answer 1

Вот, пожалуйста, поставьте его так, как это, в стиле архива для удаления маркеров, используйте list-style-type:none;, и если вы не хотите использовать свойство flex, вы можете просто использовать .navbar > li{display:inline-block;}

.navbar {
    background-color: 595959;
    color: #ffffff;
    list-style: none;
    display:block;
}

.navbar{display:flex; list-style-type:none;}
.navbar li{display:block; padding:15px;   border:1px solid #000;  color:#fff; }
.navbar li a{width:100%; text-align:center; color:#000;  text-decoration:none; }
.navbar2P{list-style-type:none;}
.navbar2 li{display:inline-block; }
.navbar2 li a{display:block; border:1px solid #000; color:#000; padding:15px 5px; text-decoration:none; }

<ul class = "navbar" > 
    <li><a href = "#">Home</a></li>
    <li><a href = "#">About Us</a></li>
    <li><a href = "#">Our Projects</a></li>
    <li><a href = "#">Contact Us</a></li>
    <li><a href = "#">Donate</a></li>
</ul>

<ul class = "navbar2" > 
    <li><a href = "#">Home</a></li>
    <li><a href = "#">About Us</a></li>
    <li><a href = "#">Our Projects</a></li>
    <li><a href = "#">Contact Us</a></li>
    <li><a href = "#">Donate</a></li>
</ul>

Answer 2

У вас должен быть нужный результат, если вы добавите:

display: block;
position: relative;

Если это не поможет - пожалуйста, создайте песочницу в jsfiddle или аналогичном ресурсе и дайте ссылку, давайте посмотрим, что не так.

Если вам нужно стилизовать элементы li и a , вам также необходимо написать, например:

.navbar li{
list-style: none;
padding: 1vw 2%;
}
.navbar li a{
text-decoration: none;
}

Answer 3

Взято из этого поста :

Вы можете удалить маркеры, установив для list-style-type значение none в CSS для родительского элемента (обычно a), например:

ul {
  list-style-type: none;
}

Вы также можете добавить к этому отступы: 0 и отступ: 0, если хотите удалить отступы.

См. Список дляотличный обзор методов форматирования списка.

Надеюсь, это поможет!

Answer 4

Просто добавьте еще один класс CSS:

ul {
  list-style: none;
{