WooCommerce问题，使产品页面响应

Question

您好，提前感谢您。我有这个NSFW网站(浪漫电子书，也许有一些热门图片(https://sitetest.wigigx.com/mf-romance/

我设法创建了一个简码和一个功能，以在此页面中将摘录显示在电子书封面旁边(当然是通过创建的简码(但真正的问题是，我无法让摘录、价格、标题和星级居中并响应迅速，也无法适应容器，使其与图像大小完美对齐。

我设法输入摘录，"提升"标题(之前在底部(并在图像和文本之间留出一些余量，但我需要

- 将标题置于顶部居中

-然后摘录居中

-然后是星级

-最后的价格

-和底部的"立即获取"bottun 全部居中，对齐且响应迅速。

我还在标题上放了一些边框以"看到它"并对其进行编辑

到目前为止的代码，知道吗？

/*Float image to the left*/
ul.products li.product img {
    float: left;
}
/*Add hover to image*/
a:hover img { 
    border:solid #eeccdd 5px;
}
/*Change Title color and float text to right*/
ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2, ul.products li.product h3{
    color: #cc5588;
    float:right;
    width: auto;
}
/*Center Excerpt and price and Button Get it now*/
ul.products li.product{ text-align: center;
}

/*Lift Up title*/
.beta, h2 {
    clear: none;
    display: flex;
}

提前致谢

Answer 1

>太好了！我能够用一些CSS解决它

• 更改了浮动：从左到标题以显示：内联块

/*Change Title color and float text to left*/
ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2, ul.productsli.product h3{
olor: #cc5588;
display: inline-block;
    width: auto;
}
•   SOLVED added padding: 10px to image - make some space between image and text
/*Float image to the left*/
ul.products li.product img {
    float: left;
    padding: 10px;
}

谢谢