Question

在我的wordpress / woocommerce网站上，我有很多产品选项，在我的购物车中显示这些选项 - 选择的选项以流畅的文字显示，反对每行有一个选项，看起来更结构化并且更容易阅读。

我的问题是，如果可能，使用CSS将流畅的文本结构化为行，CSS将是我解决它的最方便的方式，尽管我也对其他选项持开放态度。

尝试将以下产品添加到购物车LINK 加入购物车按钮，在我的语言中显示“LÄGGTILI KUNDVAGN”。然后转到CART。

正如您可以在标题下方的第一列和产品图片旁边看到的那样 - 常规文本中的选项类型：然后选择粗体文本选项。前两个选项是“Bredd： 5（480 mm）Höjd： 5（480 mm）”

我想要的是这样显示：

Bredd： 5（480 mm）

Höjd： 5（480 mm）

等

这个问题有一个简单的解决方案吗？再次最好通过CSS？

提前多多感谢！

Answer 1

您可以使用flexbox。添加以下CSS以解决此问题

.tm-cell {  /*Or you can update your selector*/
  display: flex;
  align-items: center;
  justify-content: space-between;
}

Answer 2

如果您检查html代码，您可以看到条目周围的div是： <div data-uniqid="58ede56aeca6c6.03775072" data-logic="" data-haslogic="" data-fblabelshow="" data-fbvalueshow="" class="cpf_hide_element tm-cell col-6 cpf-type-select prod-height-div">

它的班级宽度设置为50％，因此您可以将其添加到您的css中，将其设置为100％：

.tm-extra-product-options .col-6, 
.tm-extra-product-options .tm-cell.col-6, 
.tc-cell.tc-col-6, .tc-col-6 {
    width: 100% !important;
}

Answer 3

如果您希望堆叠所有项目，请

.variation{ 
 display: flex;
 flex-direction: column;
}

使用CSS将文本划分为行

3 个答案: