Блог

Главная - Вопросы по программированию - Панель навигации неправильно отцентрирована, слева от нее немного больше пробелов

Панель навигации неправильно отцентрирована, слева от нее немного больше пробелов

#html #css #navbar #centering #navigationbar

#HTML #css #панель навигации #центрирование

Вопрос:

Моя панель навигации неправильно центрируется, и это сводит меня с ума — с левой стороны от нее немного больше пробелов. Заранее большое вам спасибо. Вот код

HTML:

 <div class="navbar">
    <ul class="navitems">
        <li>
            <a class="current" href="index.html">Home</a>
        </li>
        <li>
            <a href="podcasts.html">Podcasts</a>
        </li>
        <li>
            <a href="articles.html">Articles</a>
        </li>
        <li>
            <a href="merch.html">Merch</a>
        </li>
        <li>
            <a href="aboutus.html">About Us</a>
        </li>
    </ul>   
</div>

CSS:

 body {
    margin:0
}

.navbar {
    text-align: center;
    border: 1px solid black;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.navitems ul {
    list-style: none;
}
.navitems li {
    display: inline-block;
    padding-top: 1.5%;
    padding-bottom: 1.5%;
    padding-right: 3%;
    padding-left: 3%;
    border: 1px solid blue;
    width: 12%;
    font-size: 20px;
}
.navitems a {
    color: black;
    text-decoration: none;
    font-family: georgia;
}
.navitems li:hover a{
    transition: all ease-in-out .5s;
    color: #f88122;
    text-decoration: underline;
}

Ответ №1:

  1. <ul> у тега есть padding-inline-start стиль по умолчанию, поэтому он необходим для сброса этого значения.
  2. Чтобы выровнять элементы по середине, необходимо установить vertical-align: middle на <li> элементы.
  3. .navitems ul указывает на <ul> селектор внутри .navitems селектора. И из вашего html-кода вы должны изменить его на ul.navitems .

Ниже приведен рабочий фрагмент.

 body {
  margin: 0
}

.navbar {
  text-align: center;
  border: 1px solid black;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

ul.navitems {
  list-style: none;
  
  padding-inline-start: 0;
}

.navitems li {
  display: inline-block;
  padding-top: 1.5%;
  padding-bottom: 1.5%;
  padding-right: 3%;
  padding-left: 3%;
  border: 1px solid blue;
  width: 12%;
  font-size: 20px;
  
  vertical-align: middle;
}

.navitems a {
  color: black;
  text-decoration: none;
  font-family: georgia;
}

.navitems li:hover a {
  transition: all ease-in-out .5s;
  color: #f88122;
  text-decoration: underline;
}  
 <div class="navbar">
  <ul class="navitems">
    <li><a class="current" href="index.html">Home</a></li>
    <li><a href="podcasts.html">Podcasts</a></li>
    <li><a href="articles.html">Articles</a></li>
    <li><a href="merch.html">Merch</a></li>
    <li><a href="aboutus.html">About Us</a></li>
  </ul>
</div>

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

1. @Kyle не забывайте, что вы можете пометить вопрос как «принятый» и / или проголосовать за него 🙂

Ответ №2:

Если вы проверите свой код, вы обнаружите, что ваш селектор неверен в .navitems том, что вам не нужно добавлять ul, и для ul есть padding-left , поэтому заполнение должно быть нулевым. Удачи

 body {
    margin:0
    }

    .navbar {
    text-align: center;
    border: 1px solid black;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    }
    .navitems { /* Change the css selector */
      list-style: none;
      padding: 0 !important; /* Add this line */
    }
    .navitems li {
    display: inline-block;
    padding-top: 1.5%;
    padding-bottom: 1.5%;
    padding-right: 3%;
    padding-left: 3%;
    border: 1px solid blue;
    width: 12%;
    font-size: 20px;
    }
    .navitems a {
    color: black;
    text-decoration: none;
    font-family: georgia;
    }
    .navitems li:hover a{
    transition: all ease-in-out .5s;
    color: #f88122;
    text-decoration: underline;
    }  
 <div class="navbar">

    <ul class="navitems p-0">
    <li><a class="current" href="index.html">Home</a></li><li><a href="podcasts.html">Podcasts</a></li><li><a href="articles.html">Articles</a></li><li><a href="merch.html">Merch</a></li><li><a href="aboutus.html">About Us</a></li>
    </ul>   
    </div>