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在内容周围设置父级flex和空格。

Fiddle

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: