Question

我试图显示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;
}

我想要的显示是固定在页面左中角的链接。并直接从链接按钮我所拥有的是按钮，链接固定在页面的中间左侧（这很好），但按钮位于链接上而不是在它们旁边。
我尝试了所有的显示和poition属性，但我无法得到我想要的东西。
我知道解决方案必须简单，但我真的很挣扎。你能帮我吗？

Answer 1

在您的示例中，您已经习惯了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>

Answer 2

您将按钮的位置固定在距离顶部50％的位置，您也可以将其固定在左侧。

jsfiddle

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

Answer 3

您正在使用固定，并且您正在将相同的属性应用于#map_menu和#icon_menu。这是导致它们重叠的原因。如果你希望它们彼此相邻，则将它们包装在同一个div中，例如：

<div id="map-menu" class="test">
            <button id="button_menu" class="js-menu menu" type="button">
                <span class="glyphicon glyphicon-map-marker"></span>
            </button>

            <nav class="menu_content">
                <ul>
                    <li>Link</li>
                    <li>Link</li>
                    <li>Link</li>
                    <li>Link</li>
                </ul>
            </nav>

        </div

并应用以下css（删除了一些东西）：

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

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

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

#button_menu{
    display: inline-block;
}
.menu_content{
    display: inline-block;
}


.menu {

  float: left;
  margin: 2rem;
  height: 2.7rem;
  width: 3.5rem;
  outline: 0;
  padding: 0;
  border: 0;
}

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

3 个答案: