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来营救！

对于标题-h1默认情况下为display:block，因此我将其更改为display: inline;

Answer 2

Flexbox对此非常理想。将display: flex添加到父级css中并将flex: 1添加到li中，以便它们占据视口的整个宽度。 display: block的a-tag允许整个空间都可以点击，但这更多是设计决定。

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>

如何平均分散导航栏属性？

2 个答案: