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 回答