Question

大家好我为练习做了一些导航栏，我想要的是将徽标直接设置在左边，但我不知道该怎么做。导航栏也应该响应。这是代码：

＆＃13;

body {
  font-family: Helvetica;
  padding: 0;
  margin: 0;
  background-color: #f4f4f4;
  font-size: 10px;
}


/* Global */

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

ul {
  margin: 0;
  padding: 0;
}


/* Header **/

header {
  background: #28292b;
  color: #ffffff;
  min-height: 50px;
}

header a {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
}

header li {
  float: left;
  display: inline;
  padding: 0 20px 0 20px;
}

header #branding {
  float: left;
  margin-top: 5px;
}

header #branding h1 {
  display: inline-block;
  vertical-align: middle;
}

header nav {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

header .highlight,
header .current a {
  color: #e8491d;
  font-weight: bold;
}

header a:hover {
  color: #cccccc;
  font-weight: bold;
}

＆＃13;

<header>
  <div class="container">
    <div id="branding">
      <h1>LOGO</h1>
    </div>
    <nav>
      <ul>
        <li><a href="#">ONE</a></li>
        <li><a href="#">TWO</a></li>
        <li><a href="#">THREE</a></li>
        <li><a href="#">FOUR</a></li>
        <li><a href="#">FIVE</a></li>
      </ul>
    </nav>
  </div>
</header>

＆＃13;

当我调整手机宽度时，会出现汉堡包图标，左侧不再标识徽标。它应该在中心。

我希望有人可以帮助我。谢谢:)

将导航栏徽标设置为左侧

0 个答案: