css - 响应式 CSS 导航行为异常

Question

一段时间以来，我一直在为我的 wordpress 网站开发响应式主题。我正在使用媒体查询来确定屏幕尺寸并相应地调整我的布局。我现在面临的问题是在标题中。一切都按预期工作，直到屏幕在 638 像素宽和 1023 像素宽之间......那时导航意外地弹出到屏幕的一侧(它应该居中)。奇怪的是我没有 638-1023 的媒体查询。下面是基本代码，但您可以在我的网站 (digitalbrent.com) 上看到所有代码。如果有人能告诉我为什么会这样(我已经在多个设备上尝试过，所以我知道这不仅仅是我的屏幕)，我将非常感激。我不太确定是什么原因导致导航栏像那样弹出，但我需要修复它。

CSS:

/******************************** Medium Screen Styles */

@media screen and (min-width: 481px) and (max-width: 1023px){

    #titleBox {
        margin-top: 38px;
        width: 45%;
        margin-left: 5%;
    }

    #siteTitle {
        margin-top: 4px;
        font-size: 28px;
        width: 130px;
    }

    #tagline{
        color:#FFFFFF;
        font-family: georgia bold italic, serif bold italic;
        font-size: 18px;
        width: 210px;
        text-align: center;
        margin-left: 0px;
        margin-top: 5px;
    }

    #ctaBox{
        margin-top: 42px;
        width: 45%;
        margin-right: 5%;
    }

    #cta {
        color: #27f231;
        font-family: georgia bold italic, serif bold italic;
        font-size: 18px;
        float: left;
        position: absolute;
        top: 10px;
        left: 50%;
        width: 224px;
        margin-left: -112px;
        margin-bottom: 20px;
        font-size: 18px;
    }

    #phone{
        color: white;
        font-size: 20px;
        font-family: ariel, sans-serif;
        padding: 16px 0;
    }

    #headButton{
        margin: 0 auto;
        width: 70%;
        max-width: 322px;
        text-align: center;
    }

    #nav {
        float: left;
        margin-top: 10px;
        margin-bottom: 12px;
        width: 300px;
        left: 50%;
        margin-left: -150px;
    }

    #nav ul li{
        font-size: 10px;
        display: inline-block;
        list-style: none;
        text-align: center;
        font-family: georgia bold italic, serif bold italic;
        color: white;
        margin-right: 10px;
    }

    #nav ul li:last-child{
        margin-right: 0px;
    }

HTML:

<div id="header">
                <div id="titleBox">
                        <img id="logo" height="70" width="70" src="wp-content/themes/TesterThemeX/images/web-design.jpg" alt="Web Designer Logo - Brent Blackwood" />
                        <h1 id="siteTitle">Brent Blackwood</h1>
                        <h2 id="tagline">Web & Graphic Design</h2>
                </div>
                <div id="ctaBox">
                    <span id="cta">Call Today for a FREE Quote!</span>
                    <h2 id="phone">(801) 4-PRO-WEB</h2>
                    <div id="headButton" class="ctaButton">&nbsp;The CTA Button!&nbsp;</div>
                </div>
                <div id="nav" class="navScroll">
                    <ul>
                        <li id="home">
                            <div class="navIcon"></div>
                            Home
                        </li>
                        <li id="blog">
                            <div class="navIcon"></div>
                            Blog
                        </li>
                        <li id="resume">
                            <div class="navIcon"></div>
                            Resume
                        </li>
                        <li id="portfolio">
                            <div class="navIcon"></div>
                            Portfolio
                        </li>
                        <li id="lab">
                            <div class="navIcon"></div>
                            &nbsp;Lab&nbsp;
                        </li>
                        <li id="contact">
                            <div class="navIcon"></div>
                            Contact
                        </li>
                    </ul>
                </div>
                <div class="clean"></div>
            </div>

Answer 1

如果 #nav 应该居中，那么您需要:

• 将 float: left 替换为 float: none(因为您要在全局范围内为 #nav 赋予该值)。
• 将 margin-left: -150px 替换为 (从您的 CSS 中借用顶部/底部值) margin: 10px auto 12px。