Question

我在这个页面上遇到问题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>

＆GT;

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. ?>

FOOTER

    <!-- 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:bound303@yahoo.com" 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>

Answer 1

在style.css中，请添加此css，您使用的是100％宽度，并且还应用了填充

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

Answer 2

如果您能够使用css3，则可以在页脚上使用box-sizing。您的宽度设置为100％，顶部有填充。尝试：

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

页面水平滚动的问题

2 个答案: