0

私はしばらくの間、自分のワードプレス サイトのレスポンシブ テーマに取り組んできました。メディア クエリを使用して画面サイズを決定し、それに応じてレイアウトを調整しています。私が今直面している問題はヘッダーにあります。画面の幅が 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 に答える