创建三个单独按钮的垂直堆栈

Question

我在网站上使用了以下代码块，每个按钮都有各自的类名。

add_action( 'woocommerce_after_add_to_cart_button', 'additional_simple_add_to_cart_10', 20 );
function additional_simple_add_to_cart_10() {
    global $product;

// Only for variable product type 
    $href = '?add-to-cart=' . esc_attr( $product->get_id() ) . '&quantity=10';
$class = 'ingle_add_to_cart_button-10 button alt';
$style = 'display: inline-block; margin-top: 12px;';
$button_text = __( "10 Tickets", "woocommerce" );

// Output
echo '<br><a rel="no-follow" href="'.$href.'" class="'.$class.'" style="'.$style.'">'.$button_text.'</a>';

}

每个按钮当前串联在一起。我对CSS不太满意，我的三个按钮命名如下。我怎样才能让他们互相垂直分组？还是所有人都使用相同的名字，这可能吗？

ingle_add_to_cart_button-10 button altingle_add_to_cart_button-5 button altingle_add_to_cart_button-1 button alt

Answer 1

将三个按钮包装在div容器中。在您的CSS中添加：

display: flex; flex-direction: column