【问题标题】:I want to create the following menu style by css我想通过 css 创建以下菜单样式
【发布时间】:2017-11-15 16:41:28
【问题描述】:

你可以看到,

|导航 --- 标志 --- 信息 |

这是我想要的移动风格。

Nav 左对齐。

徽标居中对齐。

信息右对齐。

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

我必须为每个项目实现哪些样式才能得到我想要的?

请,谢谢。

【问题讨论】:

  • 你有尝试过吗?研究是在Stack Overflow 上提问的先决条件。
  • 对不起,我不能

标签: html css styles navbar bootstrap-4


【解决方案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>

【讨论】:

    【解决方案2】:

    使用flexbox 使父级伸缩并在内容周围留出空间。

    Fiddle

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

    【讨论】:

    • 请问您为什么认为在菜单上硬编码widthheight 是个好主意?真的不是。您的菜单在屏幕宽度低于600px 的移动设备上看起来很糟糕。
    • 我没有这么说。我只是为了代表。
    • 您在Stack Overflow 上回答。隐含地,您正在为所有未来遇到相同问题的访问者树立榜样。你的回答是“这是正确的方法,应该怎么做”。考虑使用最佳实践提供答案,并尽量不要做出假设。这样你的答案就会帮助更多的人。
    • 注明。感谢您的意见。
    猜你喜欢
    • 1970-01-01
    • 2021-12-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-09-01
    • 2018-11-23
    相关资源
    最近更新 更多