Question

我想在项目之间设置一个最大1100px的div，但如果我将.menu居中，则两个工作之间的间隔...

我能做什么？（或保证金自动吗？）

.navbar {
  display: flex;
  justify-content: center;
}

.menu {
  max-width: 1100px;
  background: red;
  display: flex;
  justify-content: space-between;
}

<div class="navbar">
  <div class="menu">
    <a href=""><img src="https://www.colacao.es/img/logo.png" width="56px" height="50px"></a>
    <div>
      <a href="">Services</a>
      <a href="">Pricing</a>
      <a href="">Blog</a>
      <a href="">Contacts</a>
    </div>
    <a href="">Log In</a>
  </div>
</div>

Answer 1

由于.menu是一个块级元素，因此自然会占用该行的最大宽度（100％）。因此，可以在元素上设置max-width来限制此行为，并在1100px或100%处停止，以先到者为准。如上面的Temani所述，您可以使用margin: auto将enter元素居中。我写了margin的一文，因为您关心的是仅在左右边距中添加auto（无需设置顶部和底部）。

.menu {
  display: flex;
  max-width: 1100px;  
  background: red;
  display: flex;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
}

<div class="navbar">
  <div class="menu">
    <a href=""><img src="https://www.colacao.es/img/logo.png" width="56px" height="50px"></a>
    <div>
      <a href="">Services</a>
      <a href="">Pricing</a>
      <a href="">Blog</a>
      <a href="">Contacts</a>
    </div>
    <a href="">Log In</a>
  </div>
</div>

我如何在其他Flex中对齐内容

1 个答案: