类别项不会显示在一行中

Question

我正在为客户完成一个定制的店面子主题。昨天，当我开始工作时，我注意到主页类别行项显示在两行上。我没有对任何模板代码或CSS做任何更改。无论我做什么，我都不能让它们显示在一行上。我已经删除了浮动，放置浮动:左后，删除了边距和填充，没有任何更改纠正类别项目显示的方式。

网站网址：https://test.onyour6designs.com

CSS

.page-template-template-homepage-php .site-main .columns-3 ul.products, 
.storefront-full-width-content .site-main .columns-3 ul.products {
    width: 100%;
    display: block;
}

.page-template-template-homepage-php .site-main .columns-3 ul.products li.product, 
.storefront-full-width-content .site-main .columns-3 ul.products li.product {
    display: inline-block;
    float: left;
    width: 29%;
    margin-right: 0;
}
.page-template-template-homepage-php .site-main .columns-3 ul.products li.product:last-child, 
.storefront-full-width-content .site-main .columns-3 ul.products li.product:last-child {
      margin-right: 0;
}

Other CSS:
storefront style.css
ol, ul {
    margin: 0 0 1.618em 3em;
    padding: 0;
}
* {
    box-sizing: border-box;
}

woocommerce.css
ul.products {
    margin-left: 0;
    clear: both;
}
ul.products:after, ul.products:before {
    content: "";
    display: table;
}
ul.products:after {
    clear: both;
}
ul.products:after, ul.products:before {
    content: "";
    display: table;
}

自定义PHP (子主题)

storefront-template-functions.php

if ( ! function_exists( 'storefront_oy6d_product_categories' ) ) {
/**
 * Display Product Categories
 * Hooked into the `homepage` action in the homepage template
 *
 * @since  1.0.0
 * @param array $args the product section args.
 * @return void
 */
function storefront_oy6d_product_categories( $args ) {

    if ( is_woocommerce_activated() ) {

        $args = apply_filters( 'storefront_oy6d_product_categories_args', array(
            'limit'             => 3,
            'columns'           => 3,
            'child_categories'  => 0,
            'orderby'           => 'name',
            'title'             => __( 'Shop by Category', 'storefront' ),
        ) );

        echo '<section class="storefront-oy6d-product-categories phone">';

        do_action( 'storefront_homepage_before_product_categories' );

        echo '<h2 class="section-title">' . wp_kses_post( $args['title'] ) . '</h2>';

        do_action( 'storefront_homepage_after_product_categories_title' );

        echo storefront_do_shortcode( 'product_categories', array(
            'number'  => intval( $args['limit'] ),
            'columns' => intval( $args['columns'] ),
            'orderby' => esc_attr( $args['orderby'] ),
            'parent'  => esc_attr( $args['child_categories'] ),
        ) );

        do_action( 'storefront_homepage_after_product_categories' );

        echo '</section>';
    }
  }
}

呈现的

<ul class="products">
    <li class="product-category product">
        <a href="https://test.onyour6designs.com/product-category/gun-holsters/">
            <div class="pso-wrap">
                <img src="//test.onyour6designs.com/wp-content/uploads/2016/09/custom-gun-holsters-420x350.jpg" alt="Holsters" width="420" height="535" /></a>      
                <div class="pso-title">
                    <a href="https://test.onyour6designs.com/product-category/gun-holsters/"><h3>Holsters <mark class="count">(21)</mark>       </h3> </a>      
                </div>
            </div>
    </li>
    <li class="product-category product first">
        <a href="https://test.onyour6designs.com/product-category/magazine-holsters/">  
            <div class="pso-wrap">
                <img src="//test.onyour6designs.com/wp-content/uploads/2014/09/OnYour6Designs_Ruger_SR22_Holster-5-420x535.jpg" alt="Mag Holsters" width="420" height="535" />
        </a>        
        <div class="pso-title"> 
            <a href="https://test.onyour6designs.com/product-category/magazine-holsters/">
                <h3>Mag Holsters <mark class="count">(13)</mark>        </h3>
            </a>        
        </div>
        </div>
    </li>
    <li class="product-category product last">
        <a href="https://test.onyour6designs.com/product-category/on-your-6-gear/"> 
            <div class="pso-wrap">
                <img src="//test.onyour6designs.com/wp-content/uploads/2015/06/Gear-420x535.png" alt="On Your 6 Gear" width="420" height="535" />
        </a>        
        <div class="pso-title"> 
            <a href="https://test.onyour6designs.com/product-category/on-your-6-gear/">
                <h3>On Your 6 Gear <mark class="count">(2)</mark>       </h3>

            </a>        
        </div>
        </div>
    </li>
</ul>

更新:我禁用了我的子主题样式表，但问题仍然存在。我切换到父主题，类别项在一行中显示。对于子主题，我只有一个样式表。

UPDATE:彻底检查了自定义PHP函数的语法错误，没有发现任何错误。

更新:我从子主题中删除了所有自定义函数和钩子，但仍然存在这个问题。它看起来可能与我的模板-homepage.php文件有关，但我不知道为什么。我对它所做的唯一改变是将我的钩子替换为自定义的店面模板函数。

Answer 1

在提出这样的问题时，也要包括相关的HTML。我包括您在这里提到的产品类别部分的HTML：

<ul class="products">
    <li class="product-category product">
        <a href="https://test.onyour6designs.com/product-category/gun-holsters/">
            <div class="pso-wrap">
                <img src="//test.onyour6designs.com/wp-content/uploads/2016/09/custom-gun-holsters-420x350.jpg" alt="Holsters" width="420" height="535" /></a>      
                <div class="pso-title">
                    <a href="https://test.onyour6designs.com/product-category/gun-holsters/"><h3>Holsters <mark class="count">(21)</mark>       </h3> </a>      
                </div>
            </div>
    </li>
    <li class="product-category product first">
        <a href="https://test.onyour6designs.com/product-category/magazine-holsters/">  
            <div class="pso-wrap">
                <img src="//test.onyour6designs.com/wp-content/uploads/2014/09/OnYour6Designs_Ruger_SR22_Holster-5-420x535.jpg" alt="Mag Holsters" width="420" height="535" />
        </a>        
        <div class="pso-title"> 
            <a href="https://test.onyour6designs.com/product-category/magazine-holsters/">
                <h3>Mag Holsters <mark class="count">(13)</mark>        </h3>
            </a>        
        </div>
        </div>
    </li>
    <li class="product-category product last">
        <a href="https://test.onyour6designs.com/product-category/on-your-6-gear/"> 
            <div class="pso-wrap">
                <img src="//test.onyour6designs.com/wp-content/uploads/2015/06/Gear-420x535.png" alt="On Your 6 Gear" width="420" height="535" />
        </a>        
        <div class="pso-title"> 
            <a href="https://test.onyour6designs.com/product-category/on-your-6-gear/">
                <h3>On Your 6 Gear <mark class="count">(2)</mark>       </h3>

            </a>        
        </div>
        </div>
    </li>
</ul>

这里发生了几件事：

如果检查输出，您会发现由于某种原因，第二个产品是获得first类。

first的部分样式是clear: both !important;，它强制它低于第一个产品，即float: left。

我个人不喜欢在这种情况下浮动，因此我建议将.product的样式调整为float: none，并保留display: inline-block。

请注意，当我摆弄它时，似乎适合我的样式如下：

.page-template-template-homepage-php .site-main .columns-3 ul.products li.product, 
.storefront-full-width-content .site-main .columns-3 ul.products li.product {
    display: inline-block;
    float: none;
    width: 29%;
    margin-right: 0;
    vertical-align: top;
}

其他人可能会告诉你，使用柔性盒是答案，我不会不同意--这不是我的“去”的方法。(如果您预期有三个以上的类别，并且类别项可能有不同的高度，那么flexbox 就是的正确选择)。

顺便提一下，在样式表中的第26行有这样的样式：

* {
    box-sizing: border-box;
}

是一条非常“危险”的规则。我在一个网站上出现了一个问题，它花了几个小时才弄清楚到底是由这个规则引起的。

我强烈警告您不要使用*规则。我唯一使用*的方法是重置边距并填充到0。

最后一个--注意产品li元素中的标记是不正确的。打开a标记，然后打开div标记，然后在div标记关闭之前关闭a标记。假设您使用的是 -the标记，则可以对其进行清理并简化如下：

    <li class="product-category product last">
        <a href="https://test.onyour6designs.com/product-category/on-your-6-gear/"> 
            <div class="pso-wrap">
                <img src="//test.onyour6designs.com/wp-content/uploads/2015/06/Gear-420x535.png" alt="On Your 6 Gear" width="420" height="535" />
                <div class="pso-title"> 
                    <h3>On Your 6 Gear <mark class="count">(2)</mark></h3>
                </div>
            </div>
        </a>        
    </li>

(如果您不使用HTML5，那么将a标记包装在div标记上是不合法的/正确的)