在css中给出内联块时的小部件保持在单独的行上

Question

使用页脚侧边栏调用作为主题没有一个小工具页脚。当我将样式应用到窗口小部件区域时（此时只是为了内联它们）我得到了这个。

的CSS：

/*footer styling*/
#footer-widget-area {
    display:inline-block;
}

结果：

页脚小部件的HTML和PHP

<?php
  
    /* The footer widget area is triggered if any of the areas
    * have widgets. So let's check that first.
    *
    * If none of the sidebars have widgets, then let's bail early.
    */
    if (   ! is_active_sidebar( 'first-footer-widget-area'  )
        && ! is_active_sidebar( 'second-footer-widget-area' )
        && ! is_active_sidebar( 'third-footer-widget-area'  )
        && ! is_active_sidebar( 'fourth-footer-widget-area' )
    )
        return;
 
?>
 
    <div id="footer-widget-area" role="complementary">
	
	<?php if ( is_active_sidebar( 'first-footer-widget-area' ) ) : ?>
	                                <div id="first" class="widget-area">
	                                        <ul class="xoxo">
	                                                <?php dynamic_sidebar( 'first-footer-widget-area' ); ?>
	                                        </ul>
	                                </div><!-- #first .widget-area -->
	<?php endif; ?>
	
	<?php if ( is_active_sidebar( 'second-footer-widget-area' ) ) : ?>
	                                <div id="second" class="widget-area">
	                                        <ul class="xoxo">
	                                                <?php dynamic_sidebar( 'second-footer-widget-area' ); ?>
	                                        </ul>
	                                </div><!-- #second .widget-area -->
	<?php endif; ?>
	
	<?php if ( is_active_sidebar( 'third-footer-widget-area' ) ) : ?>
	                                <div id="third" class="widget-area">
	                                        <ul class="xoxo">
	                                                <?php dynamic_sidebar( 'third-footer-widget-area' ); ?>
	                                        </ul>
	                                </div><!-- #third .widget-area -->
	<?php endif; ?>
	
	<?php if ( is_active_sidebar( 'fourth-footer-widget-area' ) ) : ?>
	                                <div id="fourth" class="widget-area">
	                                        <ul class="xoxo">
	                                                <?php dynamic_sidebar( 'fourth-footer-widget-area' ); ?>
	                                        </ul>
	                                </div><!-- #fourth .widget-area -->
	<?php endif; ?>
	
	                        </div><!-- #footer-widget-area -->

Footer.php在

之下

<?php
/**
 * Template for displaying the footer
 *
 * Contains the closing of the id=main div and all content
 * after. Calls sidebar-footer.php for bottom widgets.
 *
 */
?>
	</div><!-- #main -->

<div id="footer" role="contentinfo">
	<div class="trustedFooter" id="trusted-footer">
		<div class="returnPolicyFooter" id="return-policy-mobile-footer">
			<div id="return-policy-mobile-shipping" class="label Row textCenter shippingTime">Our Satisfaction Guarantee</div>
			<div id="return-policy-mobile-returns" class="label Row textCenter returnPolicy customLink">Not 100% satisfied? Send it back! Within 30 days</div>
		</div>
		<div class="trustedFooterPanel shippingFooter" id="shippingFooter">
			<div class="gwt-HTML trustedFooterItem"></div>
			<div class="gwt-HTML trustedFooterItem"></div>
			<div class="gwt-HTML trustedFooterItem"></div>
			<div class="gwt-HTML trustedFooterItem"></div>
		</div>
		<div class="returnPolicyFooter" id="return-policy-desktop-footer">
			<div id="return-policy-desktop-shipping" class="label Row textCenter shippingTime">Our Satisfaction Guarantee</div>
			<div id="return-policy-desktop-returns" class="label Row textCenter returnPolicy customLink">Not 100% satisfied? Send it back! Within 30 days</div>
		</div>
		<div class="trustedFooterPanel paymentFooter" id="paymentFooter">
			<div class="gwt-HTML trustedFooterItem"></div>
			<div class="gwt-HTML trustedFooterItem"></div>
			<div class="gwt-HTML trustedFooterItem"></div>
			<div class="gwt-HTML trustedFooterItem"></div>
		</div>
<?php
	/*
	 * A sidebar in the footer? Yep. You can can customize
	 * your footer with four columns of widgets.
	 */
	get_sidebar( 'footer' );
?>


			
	</div><!-- #footer -->

</div><!-- #wrapper -->

<?php
	/*
	 * Always have wp_footer() just before the closing </body>
	 * tag of your theme, or you will break many plugins, which
	 * generally use this hook to reference JavaScript files.
	 */

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

小部件的右侧和中间对齐来自小部件本身的属性。