Question

我目前坚持制作适合移动设备的导航菜单。我想要的效果是让徽标位于屏幕左侧，菜单按钮位于右侧。每当您单击菜单按钮时，它将切换徽标和菜单按钮下方的菜单。但是，菜单显示在徽标和菜单的右侧，菜单和徽标粘在一起，或者其他一些问题。

我尝试过的解决方案：

float：对#menu。这个问题是将菜单按钮向上或向下推，并且它不再与徽标垂直对齐。
margin-right on .logo占百分比。这个问题是它只保持菜单按钮右对齐20px范围。使其无用并产生对太多媒体查询的需求

那么我怎样才能达到理想的效果？

<header class="parent_header">
    <div class="main_header">
        <h2 class="logo"><a href="#">Kar Kompare</a></h2>
        <ul class="main_nav">
            <li><a href="#">Buy</a></li>
            <li><a href="#">How It Works</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">About Us</a></li>
        </ul>
    </div>

在此处查看我的HTML：https://jsfiddle.net/cfavela512/74x5975j/

感谢您的帮助

Answer 1

尝试以下css

    #menu {
        float: right;
        margin: 24px 0;
    }
   .logo {
       background:red;
       float: left;
       margin: 0;
       padding: 20px 0;
   }
  .main_nav {
      clear: both;
   }

Answer 2

你可以像这样使用flex-box，

.main_header{
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
.logo {
  flex: 1 auto;
  background: red;
}
#menu {
  flex: 1 auto;
  text-align: right;
}
.main_nav {
  flex: 1 100%;
}

移动导航菜单 - 响应格式

2 个答案: