Question

我正在尝试创建一个导航栏，其中包含四个元素，两个较小的按钮将链接到主页和一个联系页面，然后两个较大的按钮将链接到该站点的两个主要部分。我试图以两个大按钮居中的方式放置东西，左边有两个小按钮。

我不能“保证金：0自动;”我们必须将它们设置为“display：block;”中的两个大按钮。它将它们设置在与较小按钮不同的行上，并且只要浏览器窗口发生变化，绝对定位会使布局变得混乱。

我觉得我在这里缺少一些简单的东西。我是从错误的角度来看这个吗？

这是我现在所拥有的一个Dabblet ...... http://dabblet.com/gist/6287837

HTML

<div id="nav-container">
<div id="small-button-container">
    <img src="http://placehold.it/47x22" class="small-button01" />
    <img src="http://placehold.it/70x42" class="small-button02" />
</div>
<div id="big-button-container">
    <img src="http://placehold.it/360x64" />
    <img src="http://placehold.it/360x64" />
</div>
</div>

CSS

#nav-container{
outline: 1px red dashed;
width: 1000px;
display: block;
margin: 0 auto;}

#small-button-container{
display: inline-block;
width: 136px;
position: relative;
top: -22px;
left: 40px;}

#big-button-container{
display: inline-block;
width: 780px;
height: 64px;
margin-left: 70px;}

.small-button01{
display: inline;
position: relative;
left: 5px;}

.small-button02{
display: inline;
position: relative;
left: 15px;}

Answer 1

您可以将position: absolute;应用于#small-button-container，这样大按钮就会居中。

请注意，我们将position: relative;放在父容器上，以便#small-button-container绝对相对于父容器。

<强> CSS

#nav-container {
    outline: 1px red dashed;
    width: 1000px;
    display: block;
    margin: 0 auto;
    text-align: center;
    position: relative;
}
#small-button-container {
    position: absolute;
    top: 0;
    left: 0;
}

<强> Demo

Answer 2

除了position：absolute之外，如果你知道＃small-button-container的计算宽度，你也可以尝试在＃nav-container上使用负左边距。您可以在＃nav-container上使用text-align：center。因为它是一个div你不需要使用display：block。如果你在＃small-button-container上有额外的填充，你需要考虑到这一点。

#nav-container {
   margin: 0px auto;
   text-align: center;
   margin-left: -136px;
}

CSS导航栏 - 基于导航栏中的元素居中

2 个答案: