Question

我对html编程和尝试一些新事物都很陌生，所以请记住这一点;）我试图将我的标题（伦敦）放在我的导航栏中，而另一个标题留在左侧之前的链接，以及留在右侧之后的链接。

我试图在标题上使用margin auto，但我似乎无法正确使用它。你有什么建议吗？

  .nav {
  width: 800px;
  display: flex;
  background: blue;
  align-items: center;
  justify-content: space-between;
}

body,
html {
  margin: 0;
  padding: 0;
}

.nav ul {
  padding: 0 5;
  list-style-type: none;
  background: white;
  display: flex;
  align-items: center;
  background: none;
  flex-wrap: wrap;
}

.nav ul li a {
  text-decoration: none;
  padding: 0px 22px;
  display: block;
  line-height: 1;
  color: black;
}

<!--#overskrift {
  margin-left: auto;
  margin-right: auto;
  -->

<nav class="nav">
  <ul>
    <li>
      <i class="fa fa-home"></i>
      <a href="#">Hjem</a></li>
    <li>
      <i class="fa fa-map-marker" aria-hidden="true"></i><a href="#">Kart</a></li>
    <li>
      <i class="fa fa-bed" aria-hidden="true"></i>
      <a href="#">Hotel</a></li>
    <li id="overskrift"><i class="fa fa-building" aria-hidden="true"></i>london</li>
    <li id="sok">
      <form><input placeholder="søk" /><i class="fa fa-search"></i></form>
    </li>
    <li><i class="fa fa-info-circle" aria-hidden="true"></i><a href="#">Informasjon</a></li>
    <li id="facebook"><i class="fa fa-facebook-official" aria-hidden="true"></i><a href="#">Lik oss!</a></li>
  </ul>
</nav>

Answer 1

尝试在display: inline-block;中使用.nav ul li a。

HTML / CSS：如何使用flexbox将导航栏中心化？

1 个答案: