響應式CSS導航行爲奇怪

我一直在爲我的wordpress網站響應主題一段時間了。我正在使用媒體查詢來確定屏幕大小並相應地調整我的佈局。我現在面臨的問題是在標題中。一切都按預期工作，直到屏幕寬度在638像素和1023像素之間...這是當導航意外彈出到屏幕的一側（它應該居中）。奇怪的是我沒有638-1023的媒體查詢。以下是基本代碼，但您可以在我的網站上看到所有內容（digitalbrent.com）。如果有人能告訴我爲什麼會發生這種情況（並且我已經在多個設備上嘗試過，所以我知道這不僅僅是我的屏幕），我真的很感激它。我不太確定是什麼導致導航彈出像這樣，但我需要修復它。響應式CSS導航行爲奇怪

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>

來源

2013-09-24 Digital Brent

如果#nav是應該然後集中你需要：

與float: none更換float: left（因爲你'全球價值#nav）。
用替換margin-left: -150px（從您的CSS借用頂部/底部值）margin: 10px auto 12px。

來源

2013-09-24 16:21:14

你是部分正確的尼爾斯。問題主要在於浮球。然而，改變餘量並不是必要的。謝謝你的幫助。對此，我真的非常感激。 –

響應式CSS導航行爲奇怪

回答

相關問題