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

我的CSS定位技能一直非常糟糕。我希望将导航栏放在我的徽标旁边，并使其随页面移动，而不会在1080p屏幕上的最大化窗口之外的任何小窗口上出现扭曲

它目前的样子：

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

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

有人能告诉我我在哪里搞砸了吗？我很尴尬的是，在所有的事情中，我的定位太差了

谢谢。

我解决了你的问题

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

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

#navigation {
    display: inline-block;
}

---

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

如果您想将徽标和导航栏放置在页面的中心：： 设置#标题“显示：内联块”、“高度：自动”和“文本对齐：中心”，并删除添加到#徽标和#导航中的所有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”。

因此部分问题在于左右边距固定。删除#徽标和#导航的固定左右边距，并在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断点。以下是一个教程：

---

元素上有静态定位（即

右边距：515px；

，），它总是绝对的，在不同的屏幕尺寸上看起来会很奇怪，而不是你设计的屏幕尺寸（

右边距：515px；

，会破坏小iPhone显示屏上的布局）。您需要使用相对度量单位（如

%

）而不是

px

）来相对定位元素。这可能是一项艰巨的任务，这就是为什么会有像Bootstrap@zgood是的，我喜欢Bootstrap这类东西，但我这次不使用它的原因是，我想开始做一些自由职业者的开发工作，我真的需要停止依赖Boostrap或其他框架来保存我的定位，这是我唯一没有掌握的概念。如果你想“手卷”这个，请参阅我发布的谷歌响应设计教程-@AaronNewton当我回复他时，我指的是你的评论，实际上我正要回复你的评论。我会调查这件事，并很快给它一个机会。谢谢你给你更多的力量。是CSS度量单位的良好参考。您可能还需要使用健康剂量的

@media

查询。响应性设计也变得更加疯狂的动态内容。。。祝你好运。我希望在调整页面大小时，不要把页眉弄得乱七八糟，而不是滚动。我曾经有过这样的经历，但这并不是我想要的效果（底部）。他们彼此紧挨着，但距离更远。另一个用户链接了一些关于这类事情的教程，所以我现在就去看这些。不过谢谢你。如果您阅读了“响应式设计”教程，它将指示您使用相对单位，而不是带有“自动边距”的固定宽度。正确的回答是按照教程中的建议去做——我的代码只会解决您眼前的问题。