Разрыв между заголовком и навигацией - PullRequest
Новая
       28

Разрыв между заголовком и навигацией

0 голосов
/ 23 октября 2018

Начинающий здесь.

Я пытаюсь понять, как разместить 5 элементов на моей навигационной панели.Первый элемент - заголовок, а другой - li.

Надеюсь, кто-то может помочь!

Я хочу получить следующий результат: каждый элемент заполняет 20% ширины Но то, что я получаю, это. Не равномерно распределенное пространство

Ниже фрагмента.

body {
  width: 960px;
  margin: auto;
  background-color: slateblue;
}

#navigation {
  background-color: white;
  width: 960px;
}

#navigation h2 {
  display: inline;
  width: 20%;
  background-color: #555;
  margin: 0;
  font-size: 18px;
  color: #ffa0a0;
  margin: 0;
}

#navigation ul {
  list-style-type: none;
  display: inline;
  font-size: 0px;
  margin: 0;
}

#navigation ul a {
  display: inline-block;
  width: 20%;
  background-color: #555;
  font-size: 18px;
  color: #ffa0a0;
  text-align: center;
  margin: 0;
}
<!DOCTYPE html>
<html>

<head>
  <title>Pagename</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
  <div id="navigation">
    <h2>Pagename</h2>
    <ul>
      <a href="#">
        <li>Home</li>
      </a>
      <a href="#">
        <li>Services</li>
      </a>
      <a href="#">
        <li>Portfolio</li>
      </a>
      <a href="#">
        <li>Contacts</li>
      </a>
    </ul>
  </div>
</body>

</html>

1 Ответ

0 голосов
/ 23 октября 2018

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

  • заменить ul элементом div (поскольку вы не используете li элементов)
  • заменил ширину тела на 100%, чтобызаставить его работать с отображением фрагмента (это просто для красивого отображения в ответе, вы можете заменить его своим значением пикселя. Также стиль div width по умолчанию установлен на 100% (это блокотображаемый элемент), вам не нужно устанавливать его для элемента div#navigation.

Обновление. Я добавил заголовок Pagename к равномерно распределенным элементам, чтобы соответствовать дизайнухочешь (по скриншоту). 

body {
  width: 100%;
  margin: auto;
  background-color: slateblue;
}

#navigation {
  background-color: white;
}



#navigation #nav-items {
  list-style-type: none;
  justify-content:space-between;
  display: flex;
  font-size: 0px;
  margin: 0;
}

#navigation h2 {
  background-color: #555;
  margin: 0;
  font-size: 18px;
  color: #ffa0a0;
  margin: 0;
}

#navigation #nav-items a {
  background-color: #555;
  font-size: 18px;
  color: #ffa0a0;
  text-align: center;
  margin: 0;
}
<!DOCTYPE html>
<html>

<head>
  <title>Pagename</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
  <div id="navigation">
    <div id="nav-items">
      <h2>Pagename</h2>
      <a href="#">
        <li>Home</li>
      </a>
      <a href="#">
        <li>Services</li>
      </a>
      <a href="#">
        <li>Portfolio</li>
      </a>
      <a href="#">
        <li>Contacts</li>
      </a>
    </div>
  </div>
</body>

</html>
...