html - 如何在 HTML 标题中组合组件

Question

我的标题有两个组成部分；菜单按钮和 SVG 标志。这是 simulation在代码笔上。

[作为 stackoverflow 问题种子的 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 Logo 在右侧？

Answer 1

要使汉堡包菜单位于左上角，所需的更改是使其 float 并移除其定位/边距(及其下拉菜单的定位/边距):

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

Codepen 它应该工作的地方:https://codepen.io/anon/pen/BKgGme