Question

我有这个代码。我想要底部的两个元素＆＃34; php echo do_shortcodewcas-search-form，php do_action（hamzahshop_custom_min_cart）＆＃34;要在同一条线上水平对齐，我对此非常陌生并且不知道如何做到这一点，我已经对整个平台进行了调整，但仍然没有解决方案。

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

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

1 个答案: