页边距和绝对位置不能正常工作

我有一个名为菜单的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>

来源

2013-07-09 Ali Bordbar

为什么需要绝对的位置？ – Srinivas

，因为如果我删除该行，导航div将粘贴到搜索div。 –

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

.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

来源

2013-07-09 16:40:25

谢谢！有效！你能告诉我为什么你设置了余量：-150px？这是如何工作的？我的意思是为什么-150像素？ –

在我的风格中，我设置了一个导航宽度'300px'，为了平衡div（导航）的位置，我应该使用'margin-left'的一半宽度的导航并设置为负值。更新回答 –

有趣...但我使用了display：inline-block;根据内容设置导航div的宽度。它可能是中心但不完全在中心 –

位置：浮动绝对行不通的。您必须从左侧和顶部实际设置您想要的绝对定位元素的像素。

这听起来像你甚至不真正需要的绝对定位，

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

来源

2013-07-09 16:25:11 robz228

如果我不使用绝对值，导航div会在搜索div后右移。并且无法将导航div保留在页面中央，而无需自动或文本对齐：center –

position：absolute与页边距无关。如果您希望导航停留在页面的中心，则将其作为页边距：0 auto;如果您希望搜索保留在左侧，则将其作为float：left ;.不需要任何职位：绝对的。你仍然可以有没有头寸的利润率。 – robz228

我试过你说的。导航div会在搜索div旁边，而不是在页面中间！ –

我认为user2391454有你在正确的轨道上。位置有时会变得混乱，但完全放弃可能会帮助你。把你在CSS中的所有职位拿出来看看是否有效。

让我们知道。

来源

2013-07-09 16:33:40

如果我不使用绝对值，导航div会在搜索div之后右移，而不是在页面中心 –

请尝试离开导航位置，而不是其他位置。另外，导航和搜索必须在div内吗？因为你的其他选择是将它从“菜单”div中取出并将它们放在包装器中。 –

因为在你的情况下，你可以指定wid它总是更好地使用内联块而不是浮动块。希望这有助于

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-09 17:03:21 Srinivas

谢谢，但导航div不在页面的中心！ –

我更新了jsfiddle试试这个http://jsfiddle.net/Bhx4Z/2/ – Srinivas

对不起的打字错误http://jsfiddle.net/Bhx4Z/3/ – Srinivas

页边距和绝对位置不能正常工作

回答

相关问题