我试图将所有”
添加到购物车”
按钮显示为”
内联”
, 但由于某些产品上的文字较长, 因此出现了跳跃现象。我尝试了各种修复程序, 但没有运气。
解决此问题的最简单方法是什么?
我使用CSS设置了背景横幅的最小高度, 从而修复了部分问题。但是”
添加到购物车”
按钮仍然会跳来跳去。
是否可以设置相对高度或其他高度以便它们出现在同一位置?
我尝试过的CSS代码(但这也并不能使其看起来正确):
.woo-product-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}.woo-product-box {
min-height: 160px;
}
它是这样的:
文章图片
这是它的外观:
文章图片
我不太擅长高级编码(主要是CSS), 并且该网站以主题为基础, 因此无法更改HTML的主要部分。因此, 首选CSS选项或functions.php的PHP代码。
此CSS代码在某种程度上解决了该问题, 但在某些简短说明的产品上造成了很大的差距。有什么CSS方式可以使它更受欢迎吗?
.box-text a:not(.button) { min-height: 90px;
}
站点位于:http://detitalienskekoekken.dk.linux99.unoeuro-server.com/shop/
#1
.ajax_add_to_cart.add_to_cart_button.product_type_simple.button.primary.is-outline.mb-0.is-small {
margin-top: 20px;
width: 100%;
padding: 5px 0 5px 0;
background-color: #c31919;
color: #FFFFFF;
border-radius: 5px;
}
应该是按钮的CSS代码。
【在类别页面上内联显示” 添加到购物车” 按钮】其余的工作需要通过调整HTML来完成。
推荐阅读
- 以不同的方式显示数组
- 在带有子项的菜单项上禁用标记[WordPress]
- Flutter中设置Android的应用名称和图标(android,ios,web)#yyds干货盘点#
- #yyds干货盘点#使用Java实现一致性hash算法(consistent hashing)「上」
- #yyds干货盘点#基于 OneData 的数据仓库方法论
- 高效采集数据的背后都有一个DTM
- #yyds干货盘点# 深度揭秘Netty中的FastThreadLocal为什么比ThreadLoc
- openstack的环境变量#私藏项目实操分享#
- #yyds干货盘点# Selenium Web端自动化从入门到实践