Question

我有一个叫做菜单的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 code：

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

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

Answer 1

位置：绝对不适用于浮动。你必须实际设置左边和你想要绝对定位元素的顶部像素。

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

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

Answer 2

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

告诉我们。

Answer 3

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

.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

首先，left: 50%。这会将导航的左侧边缘移动到中心。
使用负边距为宽度的一半（导航div的宽度：300px）。在我们的示例中，必须将margin-left设置为-150px才能将框移回正确的位置

2015年更新

你可以在没有“位置”的情况下进行，你可以使用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 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;
}

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

4 个答案: