响应式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导航行为奇怪

回答

相关问题