产品名称文字重叠价格。怎么修？

Question

HELLO KIND SIRS和MADAMS，

http://www.statis-online.com 对于首页根目录，

产品名称与产品价格重叠（名称较长时）。

- 我想知道如何使产品名称和价格不重叠！ （逐步指示首选。不是非常友好的代码）

要么改变单词的大小？ 要么 价格的位置？

欢迎提出其他建议！

谢谢！

Answer 1

在文件style.css中你有：

.products-grid .product-name a {
display: block;
color: #222;
height: 44px;
font-size: 13px;
font-weight: bold;
}

您需要删除 height 属性，因为链接设置为显示为块，因此项目不会超过设置的44px高度，并且它会溢出到下一个元素。

这将解决名称问题，但会使项目框保持不同高度的产品。

要解决此问题，请移除价格框的高度，并为 .item-bottom设置高度和位置：相对

然后你可以设置价格框并且＆＃34;添加到购物车＆＃34;按钮位于绝对并将它们设置在 .item-bottom 的底部。

所以你有：

.products-grid .item-bottom {
padding: 10px;
height: 155px;
background: url(../images/griditem-bottom.gif) repeat-x left top;
position: relative;
}

.products-grid .product-name a {
display: block;
color: #222;
/* height: 44px; */
font-size: 13px;
font-weight: bold;
}

.products-grid .price-box {
margin: 5px 0;
/* height: 58px; */
position: absolute;
bottom: 40px;
}

.products-grid .actions {
height: 26px;
position: absolute;
bottom: 10px;
}