Question

我一直在为客户开发一个电子商务商店，我已经找到了一个我无法找到解决方案的交叉点。如果你看一下链接中的第一行产品，下面每个产品图片都是产品名称，描述然后（从右到左）单词“price”（希伯来语），实际价格（NIS / ILS）然后单词“per kilo”（希伯来语。我想要做的是，目前只围绕产品价格的边界将围绕产品价格和“每公斤”字样。我试过这个例子：

span.amount, span.amount > span.amount:after{
        background: #f7f7f7; 
    border: 1px solid #eaeaea;
    border-style: solid; 
    border-radius: 3px 0px 0px 3px;
}

有什么想法吗？

Answer 1

所以，目前你有：

ul.products li.product .price:before {
    content: 'מחיר ';
    color: #000;
    font-size: 14px;
    font-weight: 700;
    padding: 7px 11px 4px;
    background: #f7f7f7;
    text-align: right;
    border: 1px solid #eaeaea;
    border-style: solid;
    border-radius: 0;
}

我建议将声明更改为ul.products li.product .price .amount:before并在此处取出边框样式，并添加display:inline;，这样您就可以了：

ul.products li.product .price .amount:before {
    content: 'מחיר ';
    color: #000;
    font-size: 14px;
    font-weight: 700;
    padding: 7px 11px 4px;
    text-align: right;
    display:inline;
}

然后，您需要将.amount范围的样式更改为display:inline;并添加所需的填充。所以像这样：

.woocommerce .amount{
    display:inline;
    padding:5px 10px;
}

未经过彻底测试。但似乎在Firefox中运行良好。如果你要覆盖CSS，你可能需要将它们用于稍微更具体的声明。

寻找CSS解决方案

1 个答案: