css 如何在woocommerce单一产品页面上水平对齐价格和添加到购物车按钮?

mzmfm0qo  于 2023-04-01  发布在  其他
关注(0)|答案(1)|浏览(166)

我希望它们并排出现,而不是一个在另一个上面。
参见以下示例:https://tefllessons.com/product/present-perfect-lesson-duration/
我尝试了display:inline-block,但它不工作。

zte4gxcn

zte4gxcn1#

display: flex非常适合于此,justify-contentalign-items可用于根据流和方向对齐内容
将这些应用于项目的容器元素
编辑:
通过将price和包含按钮的form元素 Package 在div中并应用display,您将获得所需的效果:flex到那个div。
同样在你的例子中,我把按钮的margin-bottom应用到了div上,你需要从按钮中删除margin。并添加了一个gap属性来设置flex项目之间的间距。
css:分组后,将该类添加到上述div即可

.flex-align-center {
    display: flex;
    align-items: center;
    margin-bottom: 1.3em;
    gap: 1.5rem;
}

相关问题