如何在 HTML 标头中组合组件

Question

我的标头有两个组件：菜单按钮和SVG徽标。这是代码笔上的模拟。

[用于为堆栈溢出问题设定种子的 CSS 子集]

.header-T-1 .header__burger span,
.header-T-1 .header__burger:after,
.header-T-1 .header__burger:before {
    display: block;
    width: 100%;
    height: 4px;
    background: #fff;
    border-radius: 2px;
    margin-top: 10px
}

如何更改 CSS，以便在同一行上，菜单按钮（汉堡菜单）在左侧，SVG 徽标在右侧？

Answer 1

在左上角获取汉堡菜单所需的更改是浮动它并删除其位置/边距（及其下拉列表的位置/边距）：

  .header-T-1 .header__burger {
-     left: 50%;
-     margin-left: -38px
+     float: left;
  }
  .header-T-1 .header-drop {
      width: 409px;
-     left: 50%;
-     margin-left: -204.5px;
      padding-top: 109px
  }

而要获得右上角的徽标，需要添加绝对定位和明确的尺寸设置：

  .main-header {
    margin-bottom: 1em;
    background: #333;
    padding: .5em;
+   position: absolute;
+   right: 0px;
+   height: 25px; /* assuming these are the desired dimensions */
+   width: 250px;
  }

应该工作的代码笔：https://codepen.io/anon/pen/BKgGme