Как равномерно распределить атрибуты навигационной панели? - PullRequest
Новая
       19

Как равномерно распределить атрибуты навигационной панели?

0 голосов
/ 20 ноября 2018

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

Кроме того, как разместить логотип и заголовок рядом друг с другом?

Заранее спасибо, высоко ценится.

Ответы [ 2 ]

0 голосов
/ 20 ноября 2018

Flexbox идеально подходит для этого.Добавьте display: flex к родительскому css и flex: 1 к li, чтобы они занимали всю ширину области просмотра.display: block для тега a позволяет кликать все пространство, но это скорее дизайнерское решение. 

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    display: flex;
}

li {
    flex: 1;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
<ul>
    <li><a class="" href="index.html">Home</a></li>
    <li><a href="index.html">Find out more</a></li>
    <li><a href="index.html">Credits</a></li>
    <li><a href="Wireframe.html">Wireframe</a></li>
    <li><a href="index.html">Admin</a></li>
</ul>
0 голосов
/ 20 ноября 2018 

.header img {
  width: 100px;
  height: 100px;
  background: #555;
}

.header h1 {
  display: inline;
}

ul {
  display: flex;
  justify-content: space-around;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  display: inline-block;
}

li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="main.css">

  <title>Chollerton Tearooms</title>
</head>

<body>

  <div class="header">
    <img src="Logo.png" alt="logo" />
    <h1>Chollerton Tearooms</h1>
  </div>

  <ul>
    <li><a class="" href="index.html">Home</a></li>
    <li><a href="index.html">Find out more</a></li>
    <li><a href="index.html">Credits</a></li>
    <li><a href="Wireframe.html">Wireframe</a></li>
    <li><a href="index.html">Admin</a></li>
  </ul>

</body>

</html>

flexbox на помощь!

Что касается заголовка - у h1 по умолчанию display:block, поэтому я изменил его на display: inline;

...