Question

美好的一天，

我正在尝试将我网站上的single_add_to_cart_button设为完整的 100％宽度，但是我真的很努力编写什么代码以及在哪里放置！我对编码真的很陌生，但是我发现我需要添加类似以下内容：

min-width: 100%!important;

我找到了我认为需要修改的function-custom-css.php文件。下面的css是我正在盯着的东西，它两次引用single_add_to_cart_button，但是我不知道在哪里放置什么代码才能使它起作用：

<?php if(get_theme_mod('color_checkout')) { ?>
    [data-icon-label]:after, .button#place_order,.button.checkout,.checkout-button,.single_add_to_cart_button.button{background-color: <?php echo get_theme_mod('color_checkout'); ?>!important }
<?php } ?>

single_add_to_cart_button的第二参考：

<?php
    $color_secondary = get_theme_mod('color_secondary', Flatsome_Default::COLOR_SECONDARY);
    if( $color_secondary && $color_secondary !== Flatsome_Default::COLOR_SECONDARY ){ ?>
        /* Background Color */
        [data-icon-label]:after, .secondary.is-underline:hover,.secondary.is-outline:hover,.icon-label,.button.secondary:not(.is-outline),.button.alt:not(.is-outline), .badge-inner.on-sale, .button.checkout, .single_add_to_cart_button{ background-color:  <?php echo $color_secondary; ?>; }

        /* Color */
        .secondary.is-underline,.secondary.is-link, .secondary.is-outline,.stars a.active, .star-rating:before, .woocommerce-page .star-rating:before,.star-rating span:before, .color-secondary{color: <?php echo $color_secondary ;?>}
        /* Color !important */
        [data-text-color="secondary"]{color: <?php echo $color_secondary; ?>!important;}

        /* Border */
        .secondary.is-outline:hover{
        border-color:  <?php echo $color_secondary; ?>
        }
<?php } ?>

我正在考虑同时在自定义CSS中使用以下内容，但我需要验证它是否正确：

#single_add_to_cart_button{
    min-width: 100%!important;
}

这是我在开发人员工具中找到的内容：

element.style {
}

[data-icon-label]:after, .secondary.is-underline:hover, .secondary.is-outline:hover, .icon-label, .button.secondary:not(.is-outline), .button.alt:not(.is-outline), .badge-inner.on-sale, .button.checkout, .single_add_to_cart_button {
    background-color: #0a0a0a;
}

与自定义CSS相比，我绝对更喜欢在子主题下进行修改和保存。

使用wordpress，woocommerce，扁平主题，如有任何疑问，请询问。感谢您的阅读。

Answer 1

默认情况下，大多数框显示为行内块对象，因此不会获得容器的宽度。您可以简单地添加display: block;，然后应该为您拉伸按钮的整个宽度。另外，最好再次检查是否还有其他CSS类正在干扰您的代码。

Answer 2

设法通过在我的css文件中使用.single_add_to_cart_button{min-width: 100%!important}解决了这个问题，花了一段时间，但是我到达了那里！

#single_add_to_cart_button {最小宽度：100％！重要； }

2 个答案: