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

Using a footer sidebar call as theme did not have a widgetized footer. When I go to apply styling to the widget areas (at this point just to inline them) I get this.

Css:

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

Result:

Result

HTML and PHP for footer widgets

<?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 is below

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

The right and centre alignments of the widgets are from properties within the widget themselves.

</div>