我想通过 css 创建以下菜单样式

Question

>你可以看到，

|导航---徽标---信息 |

这就是我在移动设备上想要的风格。

导航左对齐。

徽标居中对齐。

信息右对齐。

<div id="navbar">
  <div class="item">Nav</div>
  <div class="item">Logo</div>
  <div class="item">Info</div>
</div>

我

必须为每个项目实现什么样式才能获得我想要的东西？

拜托，谢谢。

Answer 1

到目前为止，实现此目的的最简单方法是使用 flexbox 。要将其限制在移动设备上，您需要将其包装在@media查询中，对于 Bootstrap，该查询低于 768px

#navbar {
  /* 
   * place non-mobile styles here
   * For example, to hide the navbar outside mobile...
   */
   display: none;
}
@media (max-width: 767px) {
  #navbar {
    display:flex;
    justify-content: space-between;
    align-items: center; /* optional, to center vertically */
  }
}

<div id="navbar">
  <div class="item">Nav</div>
  <div class="item">Logo</div>
  <div class="item">Info</div>
</div>

Answer 2

使用 flexbox 使父项在内容周围保持弹性和空间。

小提琴

.navbar{
  max-width: 600px;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

<header class="navbar">
  <div class="menu">
    <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
    </ul>
  </div>
  <div class="logo">
    <img src="https://placehold.it/88x88" alt="logo">
  </div>
  <div class="info">
    <p> Info about the website </p>
  </div>
</header>