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

【问题标题】：Create a vertical stack of three individual buttons创建三个单独按钮的垂直堆栈
【发布时间】：2020-08-11 14:47:42
【问题描述】：

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

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 alt ingle_add_to_cart_button-5 button alt ingle_add_to_cart_button-1 button alt

【问题讨论】：

如果您要询问有关样式化 HTML 的 CSS 问题，那么最好显示 HTML 和 CSS，而不是显示您显示的任何代码块。 How to Ask

标签： css woocommerce css-selectors

【解决方案1】：

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

display: flex; flex-direction: column

如果您不想添加容器，可以通过将每个按钮的宽度设置为

width: 100vw;

【讨论】：