如何將兩個短代碼元素水平並排對齊

Question

我有這個代碼。 我希望底部的兩個元素“ php echo do_shortcodewcas-search-form，php do_action（hamzahshop_custom_min_cart）”在同一行上水平對齊，對此我很陌生，不知道如何做到這一點，整個平台，但仍然沒有解決方案。

        <?php
/**
 * Displays Header
 *
 */

?>
<div class="header-main hamzahshop-custom-header">
<div class="container">
<div class="header-content">
        <div class="row" >
          <div class="col-lg-3 col-md-3 col-sm-12">
            <div class="logo"> 
            <?php
            if ( function_exists( 'the_custom_logo' ) && has_custom_logo() ) {
                      the_custom_logo();
            }else{
            ?>

                <?php if ( is_front_page() && is_home() ) : ?>
                    <h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" class="site-title"><?php bloginfo( 'name' ); ?></a></h1>
                <?php else : ?>
                    <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
                <?php endif; ?>
                <?php $description = get_bloginfo( 'description', 'display' );
                if ( $description || is_customize_preview() ) : ?>
                     <p class="site-description"><?php echo esc_attr($description); ?></p>
                <?php endif; ?>



             <?php }?>   


             </div>



          </div>



         <div>


     <?php echo do_shortcode('[wcas-search-form]'); ?>


     <?php do_action('hamzahshop_custom_min_cart');?>

          </div>
        </div>



        </div>



</div>    
</div>
</div> 

Answer 1

您可以將兩個內容都包裹在本質上是內聯的span中。 這意味着兩者最終都會水平並排放置。 但是，如果您的PHP內容帶有帶有塊性質的標簽，則可以使用display：flex屬性。

<style>
 .flexBox{ 
    display : flex; 
    justify-content : flex-start; //ensures content flows from left to right
 }
</style>

<div class = "clearfix flexBox" >
 <span><?php echo do_shortcode('[wcas-search-form]'); ?></span>
 <span><?php do_action('hamzahshop_custom_min_cart');?></span>
</div>