边距和绝对位置无法正常工作

Question

我有一个名为 menu 的 div，在其中我想要一个导航栏 div 和一个搜索 div。我希望导航保持在菜单 div 的中心，搜索 div 向左（或向右）。我试过这段代码，但是当我将位置设置为绝对时，将导航的左右边距设置为自动不起作用。

CSS 代码：

.menu{
    width: 100%;
    height: 65px;
    margin-bottom: 0.5%;
}

.search{
        width: 300px;
    height: 65px;
        float:left;
    z-index: 1;
    position:absolute;
}

.navigation{
    height: 65px;
    margin-left: auto;
    margin-right: auto;
    z-index: 0;
    display:inline-block;
    position: absolute;
}

HTML 代码：

<div class="menu">
    <div class="navigation"> 
        .
        .
        .
    </div>

    <div class="search">
        .
        .
        .
    </div>
</div>

Answer 1

如果您想导航到菜单中心（保持在中心）。试试这个：

.menu{
    width: 100%;
    height: 65px;
    margin-bottom: 0.5%;
    margin-top:5px;
}

.search{
    width: 300px;
    height: 65px;
    float:left;
    z-index: 1;

}

.navigation{
    width:300px; /* you can change this */
    left: 50%; /* you can change this */
    margin-left: -150px; /* you can change this */
    height: 65px;
    display:inline-block;
    position: absolute;

}

cssdeck

1. 首先，left: 50%。这会将导航的左侧边缘移动到中心。

2. 使用一半宽度的负左边距（导航 div 的宽度：300px）。在我们的示例中，必须将 margin-left 设置为 -150px 才能将框移回正确的位置

2015 年更新

不用'position'也可以，可以用flexbox

.menu {
  width: 100%;
  height: 65px;
  margin-top: 5px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
}

.search{
  width: 300px;
  height: 65px;
  margin-left:10px;
}

.navigation{
  width:300px;
  height: 65px;
  margin:0 auto;
  margin-left:220px;
}
.navigation ul {
  list-style:none;
  margin-top:5px;
}
.navigation ul li {
  float:left;
  margin-left:5px;
  border:solid 1px;
}

cssdeck 2

Answer 2

position: absolute 不适用于浮动。您必须实际设置左侧和顶部的像素，您想要绝对定位的元素。

听起来你甚至不需要绝对定位，

http://codepen.io/anon/pen/KtgBa

Answer 3

我认为 user2391454 让您走上了正确的道路。位置有时会令人困惑，但完全忽略它可能会对您有所帮助。取出你在 CSS 中的所有位置，看看是否有效。

让我们知道。

Answer 4

由于在您的情况下您可以指定宽度，因此使用内联块而不是浮点数总是更好。希望这会有所帮助

http://jsfiddle.net/Bhx4Z/2/

    .menu{
    width: 100%;
    height: 65px;
    margin-bottom: 0.5%;
    letter-spacing: -0.31em;
    }

   .search{
    width: 300px;
    height: 65px;
    float:left;
    z-index: 1;
    border:1px solid green;
    letter-spacing: normal;
}

   .navigation{
    height: 65px;
    margin-left: auto;
    margin-right: auto;
    z-index: 0;
    display:inline-block;
    letter-spacing: normal;
    text-align:right;
    border:1px solid blue;
}