我正在为客户完成自定义店面子主题。昨天开始工作时，我注意到首页类别行元素显示在两行。我没有对任何模板代码或 CSS 进行任何更改。无论我做什么，我都无法让它们显示在一行中。我已经删除了 float ，将 float:left 放回原处，删除了边距和填充，没有任何更改来纠正类别元素的显示方式。
网站网址: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(在子主题中)
店面模板函数.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>';
}
}
}
呈现的 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>
更新:我禁用了我的子主题样式表，但问题仍然存在。我切换到父主题，类别元素显示在一行中。我只有一个子主题样式表。
更新:彻底检查了自定义 PHP 函数的语法错误，但没有发现任何错误。
更新:我从子主题中删除了所有自定义函数和 Hook ，但仍然有这个问题。它似乎与我的 template-homepage.php 文件有关，但我不确定为什么。我对其所做的唯一更改是用我的 Hook 替换自定义店面模板函数。
最佳答案
在提出这样的问题时，包括相关的 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;，这迫使它低于 first 产品，即 float :向左。
我个人不喜欢在这种情况下 float ，所以我建议将 .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 是答案，我不会不同意 - 这不是我的“开始”方法。 (如果您预计有超过 3 个类别，并且存在类别元素可能具有不同高度的风险，那么 flexbox 是正确的方法)。
作为旁注，样式表第 26 行的样式:
* {
box-sizing: border-box;
}
是一个非常“危险”的规则。我在一个网站上遇到了一个问题，花了几个小时才解决，这是由这个确切的规则引起的。
我会强烈警告您不要使用 * 规则。我唯一使用 * 的方法是将边距和填充重置为 0。
最后 - 请注意，您的产品 li 元素中的标记不正确。 a 标签打开，然后 div 标签打开，然后 a 标签关闭 before div 标签关闭。 假设您使用的是 HTML5 - 可以像这样清理和标记:
<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 标记周围是不合法/不正确的)
关于css - 类别元素不会显示在一行中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39272940/