如何水平对齐两个短代码元素

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>