如何水平排列兩個短代碼元素

Question

我有這段代碼。我想要在底部的兩個元素「PHP回聲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

你可以用在跨度這是內嵌在本質上兩者的內容。這意味着兩者都會水平地左右擺動。 但是，如果您的php內容具有塊性質的標籤，您可以使用顯示：flex property。

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