Woocommerse 选项卡在移动设备中未对齐

Question

我们使用 Woocommerse。它在移动视图中依次显示描述和评论选项卡。我希望两个选项卡都在一行中。

我们检查了 woocommerse 插件设置。但无法解决问题。

Answer 1

这是移动视图上选项卡的常见响应行为。如果产品页面上有多个选项卡，这是理想的选择。

你可以用 CSS 来改变它，我会给你两个例子。第一个是使用

float

最简单的，但就布局而言不是最好的。但它会完成工作。 第二个是使用

flexbox

进行布局方面的正确布局，这是为了更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。

请注意！ 以下示例基于使用 Storefront 主题的 WooCommerce 演示商店：https://themes.woocommerce.com/storefront/。如果您使用下面的 CSS 代码，记住这一点很重要。它们可能不适用于您自己的商店，并且需要调整/调整。

---

示例 1：下面的代码是如何使用

float

：

/* Make description tabs on product page horizontally align on mobile device using float */
@media screen and (max-width: 768px) {
    .woocommerce-tabs ul.tabs li {
        width:50%;
        float: left;
    }
}

解释

下一行告诉浏览器仅在屏幕宽度最大为 768 像素的设备上应用样式。一个非常标准的数字。您可以根据您的需要进行更改。

@media screen and (max-width: 768px)

下面一行通过检查浏览器中的元素来定义我们的目标类。根据您使用的主题，它可能看起来有所不同。以下示例取自基本的 Woocommerce/Storefront 商店：

.woocommerce-tabs ul.tabs li /* li is each tab */

剩下的就是造型本身了。由于您只有 2 个选项卡，因此您可以为每个选项卡指定屏幕宽度 50% 的宽度。然后使用

float: left;

属性指定每个选项卡应浮动到其容器的左侧

    width:50%;
    float: left;

使用浮动时的注意事项

请注意，

float

并不是真正用于布局的。因此，不要开始使用浮动来布局整个网页。

Floats

的设计目的是允许文本围绕图像流动（包裹文本和块级元素）。

---

示例 2 下面的代码是如何使用

display: flex

的示例：

/* Make description tabs on product page horizontally align on mobile device using flex */
@media screen and (max-width: 768px) {
    .woocommerce-tabs ul.tabs {
        display: flex;
    }
    .woocommerce-tabs ul.tabs li {
        -ms-flex: 1; /* IE 10 */
        flex: 1;
    }
}

解释

在下面的行中，我们首先定位父元素类，其中包含所有选项卡。我们使用 CSS Flexbox 布局模块 并将其设为 Flex 容器。

.woocommerce-tabs ul.tabs {
    display: flex;
}

然后，我们定位每个选项卡，然后使用 flex 属性，并将值设置为

flex: 1;

，让所有灵活项目的长度相同，无论其内容如何。

    .woocommerce-tabs ul.tabs li {
        -ms-flex: 1; /* IE 10 */
        flex: 1;
    }

灵活的盒子布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。它是较新的 css“工具”之一，这也意味着旧版浏览器可能不支持它。如今大多数现代浏览器都支持 Flexbox。