2

我有一个名为 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>
4

4 回答 4

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 年更新

你可以在没有'位置'的情况下做到这一点，你可以使用 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

于 2013-07-09T16:40:25.150 回答
0

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

让我们知道。

于 2013-07-09T16:33:40.797 回答
0

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

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;
}
于 2013-07-09T17:03:21.383 回答
0

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

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

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

于 2013-07-09T16:25:11.717 回答