0

一段时间以来，我一直在为我的 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>
4

1 回答 1

1

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

  • 替换为float: left（float: none因为您要#nav全局赋予该值）。
  • 替换为margin-left: -150px(从 CSS 中借用顶部/底部值) margin: 10px auto 12px。
于 2013-09-24T16:21:14.537 回答