問題頁面水平滾動

我在這個頁面有問題http://goo.gl/Vdu4Q0在X軸上有額外的空間，並且不知道爲什麼。我也搜索了這個論壇的答案，但沒有找到任何適用的東西，所以我很抱歉，如果有東西在那裏，我忽略了。我重新檢查了我的HTML結構以查看是否有任何未封閉的div，但我沒有看到任何東西。有沒有人有任何想法？這裏的WordPress的結構：問題頁面水平滾動

HEADER

<header class="full left header-bg"> 
    <div class="container"> 
     <div class="container-inside left"> 
      <div class="sixteen columns"> 
       <h1 class="logo abs"> 
        <a href="<?php echo get_option('home'); ?>"/> 
         <img src="<?php echo get_stylesheet_directory_uri();?>/images/logo.png"/></a> 
        </a> 
       </h1> 
       <nav> 
        <?php st_navbar(); ?> 
       </nav> 
      </div> 
     </div> 
    </div><!--container--> 
</header>

LOOP PAGE

<?php if (have_posts()) while (have_posts()) : the_post(); ?> 



        <?php if (!is_page_template('onecolumn-page.php')) { ?> 
         <?php if (is_front_page() && !get_post_meta($post->ID, 'hidetitle', true)) { ?> 

          <div class="full left secondary-bg"> 
           <div class="container"> 
            <div class="sixteen columns"> 
             <div class="eight columns offset-by-four"> 
              <div class="hp-text-bg"> 
              <?php the_content(); ?> 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 
          <div class="full left home-posts-bg"> 
           <div class="container"> 
            <div class="sixteen columns"> 
             <div class="five columns post-bg alpha"> 
              <div class="post-bg-wrapper"> 
               <h2>TATTOO OF THE WEEK</h2> 
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
                 <div class="center img"> 
                  <a href="#" title="Tattoo Of The Week"><img src="<?php echo get_stylesheet_directory_uri();?>/images/tow-img.png"/></a> 
                 </div> 
               <p class="primary-link"><a href="#">Read More</a></p> 
              </div> 
             </div> 
              <div class="six columns post-bg"> 
               <div class="post-bg-wrapper"> 
                <h2>JEWELRY</h2> 
                 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
                  <div class="center img"> 
                   <a href="#" title="Jewelry"><img src="<?php echo get_stylesheet_directory_uri();?>/images/jewelry.png"/></a> 
                  </div> 
                 <p class="primary-link"><a href="#">Read More</a></p> 
               </div> 
              </div> 
             <div class="five columns post-bg omega"> 
              <div class="post-bg-wrapper"> 
               <h2>AFTERCARE</h2> 
                <p class="p-description-blue"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
                 <div class="center img"> 
                  <a href="#" title="Aftercare"> <img src="<?php echo get_stylesheet_directory_uri();?>/images/aftercare.png"/></a> 
                 </div> 
                <p class="primary-link"><a href="#">Read More</a></p> 
              </div> 
             </div> 
            </div> 
           </div><!--container-->  
          </div> 

        <?php } elseif (!get_post_meta($post->ID, 'hidetitle', true)) { ?> 

         <h1 class="entry-title"><?php the_title(); ?></h1> 

        <?php } else { 
         echo '<br />'; 
        } ?> 
       <?php } ?> 

        <div class="full left"> 

         <?php wp_link_pages(array('before' => '<div class="page-link">' . __('Pages:', 'skeleton'), 'after' => '</div>')); ?> 
         <?php edit_post_link(__('Edit', 'skeleton'), '<span class="edit-link">', '</span>'); ?> 
        </div><!-- .entry-content --> 


       <?php comments_template('', true); ?> 

<?php endwhile; // end of the loop. ?>

頁腳

<!-- start of footer --> 
<footer> 
    <div class="full left pre-footer-bg"> 
     <div class="container "> 
      <div class="sixteen columns"> 
       <div class="five columns alpha"> 
        <h5>CONNECT</h5> 
        <a href="https://www.facebook.com/pages/Bound-by-Design/161508617202460" target="_blank"><img src="<?php echo get_stylesheet_directory_uri();?>/images/icon-fb.png"/></a> 
        <a href="mailto:[email protected]" target="_blank"><img src="<?php echo get_stylesheet_directory_uri();?>/images/icon-mail.png"/></a> 
       </div> 
       <div class="six columns"> 
        <h5>CALL</h5> 
        <p>303.830.7272<br /> 
        303.832.8282</p> 
       </div> 
       <div class="five columns omega"> 
         <h5>GET TO US</h5> 
         <p>1332 East Colfax Ave<br /> 
         Denver, CO 80218 | <a href="http://goo.gl/fVpC4" target="_blank"> Map</a> 
         </p> 
       </div> 
      </div> 
     </div><!--container--> 
    </div> 

    <div class="full left bottom-footer-bg"> 
     <div class="container"> 
      <div class="sixteen columns"> 
       <p class="bottom-footer-text">&copy; <?php echo date('Y'); ?> Bound By Design Tattoo | Site by <a href="http://brentthelendesign.com" target="_blank">brentthelendesign</a></p> 
      </div> 
     </div> 
    </div> 
</footer>  

<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri();?>/javascripts/plugins.js"></script> 
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri();?>/javascripts/nav.js"></script> 
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri();?>/javascripts/script.js"></script> 

<?php wp_footer();?> 
</body>

來源

2013-07-23 beetheezy

在style.css中請加你正在使用100％的寬度這個CSS也將填充使y事情發生

.bottom-footer-bg,.home-posts-bg,.secondary-bg{ 
width:100%; 
-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
box-sizing:border-box; 
}

來源

2013-07-23 05:18:51 Hushme

其他項目也使用填充100％寬度 – Hushme

完美。謝謝。 – beetheezy

如果您可以使用css3，則可以在頁腳上使用框大小。你有一個100％的寬度設置和填充頂部。嘗試：

.full { 
    box-sizing: border-box; 
}

來源

2013-07-23 05:17:04 Chad

它會干擾其他項目對齊這是100％，未使用填充 – Hushme

問題頁面水平滾動

回答

相關問題