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。

响应式CSS导航行为奇怪

1 个答案: