Question

我的CSS定位技巧一直非常糟糕。我希望将导航栏放在我的徽标旁边，并使其随页面一起移动，而不是在1080p屏幕上最大化窗口的任何小东西上搞砸。

目前的情况：http://5.9.78.201/abellant/

如果你的屏幕尺寸不同，它可能看起来很奇怪。

我（到目前为止）使用了这里找到的方法，但没有用，在放弃之前使用相对，绝对，甚至清算。

有人能告诉我我搞砸了吗？我很尴尬的是，在所有事情上，我的定位非常糟糕。

谢谢。

Answer 1

如果您想将徽标和导航栏放在页面的中心位置:: 设置#header“display：inline-block”，“height：auto”和“text-align：center;”并删除已添加到＃logo和#navigation

的所有CSS

#header {
width: 100%;
height: auto;
background: #f2f2f2;
margin: 0;
padding: 0;
box-shadow: 0 1.5px 1px #777;
display: inline-block;
text-align: center;
}

如果你想并排设置你的徽标和导航::

#header {
width: 100%;
height: auto;
background: #f2f2f2;
margin: 0;
padding: 0;
box-shadow: 0 1.5px 1px #777;
display: inline-block;
}

#logo {
float: left;
width: 50%;
}

#navigation {
float: right;
margin: 40px;
}

如果您想通过页面滚动移动标题部分。将#header设置为“position：fixed”。

Answer 2

问题的一部分是你有一个固定的左右边距。删除#logo和#navigation固定的左右边距，并在CSS中执行以下操作：

#header {
    margin: 0 auto; /* 0 px on top and bottom, auto on left and right => centered for a block element */
    width: 960px; /* You need a width that will accomodate the logo and nav */
}

要使其工作在其他大小，您需要查看CSS3断点。这是一个教程：

https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/?hl=en

Answer 3

我解决了你的问题。

 .container {
     min-width: 500px;
     position: relative;
     text-align: center;
 }

#logo {
    display: inline-block;
    vertical-align: middle;
}

#navigation {
    display: inline-block;
}

如果您注意到徽标和菜单并非完全居中，那是因为您的图片有一个小的空白区域，如果您可以删除该空间并替换新图像，那么它将是完美的中心：）

使用相对定位将导航与徽标对齐

3 个答案: