0

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

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

另外，我希望我的导航栏项目在缩小到 768 像素或更少时始终居中，当缩小到 480 像素或更少时。事实上，只有当它正好是 768 或 480 像素时，它才会让我的菜单项居中。

这是我的 JSFiddle：http: //jsfiddle.net/RHSab/

<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>

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

谢谢！

4

2 回答 2

0

你给标题一个min-width. 900px即使窗口较小，您的内容也会以 900 像素为中心。

你的li元素也有固定的宽度。100%“简单”的解决方法是在屏幕尺寸 < 768px 时给它们一个宽度。现在它们固定在 768 或 480px 上，导致内容以该固定宽度居中。

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

所以实际上，你有很多CSS 正在进行，据我所知，其中很多实际上是你自己添加的其他 CSS 的解决方法。

于 2013-08-04T18:41:18.837 回答
0

这个空间实际上是你的标志——

<a href="#" id="#logo"><img class="topleftlogo" src="images/Mangosteen.png"></a>
于 2013-08-04T18:37:41.060 回答