如何均匀分布导航栏属性？

Question

而不是全部都在左边，我该如何将它均匀地或足够接近地分布？我已经尝试阅读一些关于如何解决这个解决方案的博客和帖子，但我仍然没有得出结论。

另外，如何将徽标和标题并排放置？

提前致谢，非常感谢。

Answer 1

.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 来拯救！

至于 header - h1 默认有 display:block 所以我把它改成了 display: inline;

Answer 2

Flexbox 非常适合这种情况。将 display: flex 添加到父级 css 并将 flex: 1 添加到 li，以便它们占据视口的整个宽度。 display: block 的 a-tag 允许整个 space 可以点击，但这更像是一个设计决定。

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>

如何均匀分布导航栏属性？

How to spread out the navbar attributes evenly?

html

css

heading

navbar