html - 如何创建固定在左侧的内联div？

我正在尝试显示2内联，但它不能按我的要求工作。
这是我的代码：

<div id="left-menu">
    <div id="map-menu" class="test">
      <nav class="menu_content">
        <ul>
            <li>Link</li>
            <li>Link</li>
            <li>Link</li>
            <li>Link</li>
        </ul>
      </nav>
    </div>
    <div id="icon-menu" class="test">
      <button id="button_menu" class="js-menu menu" type="button">
        <span class="glyphicon glyphicon-map-marker"></span>
      </button>
    </div>
  </div>

css：

#left-menu{
  position: fixed;
  left: 0;
  height: 100%;
  width: 100%;
}

#map-menu{
  position: fixed;
  top: 50%;
}

#icon-menu{
  position: fixed;
  top: 50%;
}

.test{
  display:inline-block;
}

#button_menu{

}

.menu {
  position: relative;
  background: 0;
  float: left;
  margin: 2rem;
  height: 2.7rem;
  width: 3.5rem;
  z-index: 2;
  outline: 0;
  padding: 0;
  border: 0;
}

我想要的显示是固定在页面左中角的链接。并直接从链接按钮。
我所拥有的是按钮，链接固定在页面的左中间（很好），但是按钮在链接上而不是旁边。
我尝试了所有的display和poition属性，但无法获得所需的内容。
我知道解决方案必须很简单，但我确实为此感到困惑。你能帮我吗 ？

最佳答案

您在示例中已经习惯了position:fixed。理想情况下，只需要在最外面的容器元素上使用一次，然后使用transform使其在屏幕中垂直居中。

要使菜单和图标在同一行中，只需使用display:inline-block。

#left-menu {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

伴随一些小的调整，请参见以下更新的代码段。

#left-menu {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
#map-menu, #icon-menu {
  display: inline-block;
  vertical-align: middle;
}
#map-menu ul {
  margin: 0;
}
.menu {
  background: transparent;
  margin: 2rem;
  height: 2.7rem;
  width: 3.5rem;
  z-index: 2;
  outline: 0;
  padding: 0;
  border: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div id="left-menu">
  <div id="map-menu" class="test">
    <nav class="menu_content">
      <ul>
        <li>Link</li>
        <li>Link</li>
        <li>Link</li>
        <li>Link</li>
      </ul>
    </nav>
  </div>
  <div id="icon-menu" class="test">
    <button id="button_menu" class="js-menu menu" type="button">
      <span class="glyphicon glyphicon-map-marker"></span>
    </button>
  </div>
</div>