Question

我需要帮助来修复我的导航栏。我尝试在CSS的底部添加一些媒体查询，但我不喜欢缩小浏览器时导航栏的行为方式。

当我将浏览器尺寸缩小到768像素时，有一个显示HOME按钮上方的空间。 480px也是如此。

此外，我希望我的导航栏项目在缩小到768px或更低时，以及缩小到480px或更低时始终居中。实际上，只有当它恰好是768或480px时，它才会使我的菜单项居中。

<header>
        <a href="#" id="#logo"><img class="topleftlogo" src="images/Mangosteen.png"/></a>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact</a></li>
</header>

另外，为什么“关于”部分的文字落后于以下部分？同样值得其他部分:(

谢谢！

Answer 1

空间实际上是您的徽标 -

<a href="#" id="#logo"><img class="topleftlogo" src="images/Mangosteen.png"></a>

Answer 2

您为标题min-width 900px。即使窗口较小，您的内容也会以900px为中心。

您的li元素也有固定的宽度。当屏幕尺寸<1时，“简单”修复将使它们的宽度为100%。 768px。现在它们固定在768或480px上，导致内容以固定宽度为中心。

但我也注意到您的商品display: inline-block和float: left。这可能是因为它们需要彼此相邻的“正常”宽屏情况，但在较小的屏幕上，你只需要给它们默认的块元素行为就可以了。

实际上，你有一个很多的CSS，据我所知，其中很多实际上是你自己添加的其他CSS的解决方法。

响应式网页设计/媒体查询

2 个答案: