Мой первый элемент списка "Все" текст в навигационной панели не расположен в центре, как остальные

#html #css

Вопрос:

У меня есть панель навигации в заголовке целевой страницы этого меню, над которой я работаю, и по какой-то причине первый элемент списка в панели навигации («Все») не находится в центре, а остальные элементы списка находятся. Элементы списка имеют границы вокруг них. Есть ли способ, которым я могу поместить текст элемента списка «все» в центр, как и остальные элементы списка.

 #header #NavBar {
    text-align: center;
    font-size: 20px;   
}

#header #NavBar li {
    display: inline;
    
    margin-left: 10px;
}

#header p {
  font-size: 30px;
  text-align: center;
}

#header a {
    text-decoration: none;
    padding: 5px;
    color:#ffcc00;
    font-weight:100;  
}

#header #NavBar #all {
  border-style: solid;
  border-color:#ffcc00;
  border-width: 2px;
  border-radius: 5px;
}

#header #NavBar #all {
  border-style: solid;
  border-color:#ffcc00;
  border-width: 2px;
  border-radius: 5px;
}

#header #NavBar #breakfast {
  border-style: solid;
  border-color:#ffcc00;
  border-width: 2px;
  border-radius: 5px;
}

#header #NavBar #lunch {
  border-style: solid;
  border-color:#ffcc00;
  border-width: 2px;
  border-radius: 5px;
}

#header #NavBar #dinner {
  border-style: solid;
  border-color:#ffcc00;
  border-width: 2px;
  border-radius: 5px;
}

#header img  {
    max-height: 200px;
    margin-bottom: -65px;
}

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Brunch Menu</title>
    <link rel="stylesheet" href="main.css" />
</head>
<header id="header">
    <img id="logo" src="https://st2.depositphotos.com/1035649/7783/v/600/depositphotos_77833254-stock-illustration-restaurant-logo.jpg">
    <p>Menu</p>
    <ul id="NavBar">
        <li id="all"><a href="#">All<a /></li>
        <li id="breakfast"><a href="#">Breakfast<a/></li>
        <li id="lunch"><a href="#">Lunch<a/></li>
        <li id="dinner"><a href="#">Dinner<a/></li>
    </ul>
</header>

1. <a> Правильно закройте метку. В настоящее время его <a /> . Это должно быть </a>

2. Пожалуйста, также обратите внимание, что у вас может быть одно #header #NavBar a правило css, чтобы охватить все ваши ссылки

Ответ №1:

У тебя есть некоторые ошибки.

Во-первых, ваш тег привязки должен быть похож <a href="#"></a> на нет <a/>

Тогда ваш css должен быть таким. Проверьте эти 3 тега, внесите изменения, которые я внес. Добавить #logo и header теги. Удалите все #header img и используйте flex, как я использовал.

 #header img  {
  /* Use img like this */
  display: block;
  width: 100%;
  height: auto;
}

#logo {
  max-width: 100px;
}

header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  /* Remove this after you understand flex */
  border: 1px dashed red;
}

Наконец-то измените свою разметку вот так

 <header id="header">
  <img id="logo" src="https://st2.depositphotos.com/1035649/7783/v/600/depositphotos_77833254-stock-illustration-restaurant-logo.jpg">
  <p>Menu</p>
  <ul id="NavBar">
    <li id="all"><a href="#">All</a></li>
    <li id="breakfast"><a href="#">Breakfast</a></li>
    <li id="lunch"><a href="#">Lunch</a></li>
    <li id="dinner"><a href="#">Dinner</a></li>
  </ul>
</header>