英文:
How do I align Gutenberg add-to-cart buttons horizontally on a WooCommerce product category page?
问题
环境: 使用 Twenty Three 主题 FSE 和 WooCommerce,以及产品(Beta)Gutenberg 块来显示产品类别。我找不到可以水平对齐这些按钮的水平工具,因此我正在寻找一个 CSS 解决方案。更改文本长度不是一个选项,也不是最佳选择。
问题示例:
非常感谢任何帮助!
英文:
Environment: Using Twenty Three theme FSE & WooCommerce and the Products (Beta) Gutenberg block to display product categories. No horizontal tool exists to align these buttons horizontally that I can find so I'm looking for a css solution. Changing text length isn't an option and also not optimal.
Example of problem:
Any help would be greatly appreciated!
答案1
得分: 1
解决方案 1
在灰色正方形上使用 position: relative;
,并在按钮上使用
position: absolute;
bottom: 0px;
解决方案 2
<small>(不太好看)</small>
在灰色正方形上使用
display: flex;
flex-direction: column;
并在按钮之前添加 <span style="flex: 1;">
。
英文:
Solution 1
Using position: relative;
on the grey square and
position: absolute;
bottom: 0px;
on the buttons.
Solution 2
<small>(not so nice)</small>
Using
display: flex;
flex-direction: column;
on the grey square and putting <span style="flex: 1;">
before the button.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论