Question

我想在新行中显示“你保存...”文字。我不怎么做。请指导我。请点击了解更多详情jsfiddle code

<div class="product-wrap first">
  <div class="item">
    <div class="product-image"><a href="#">Img area</a>

    </div>
    <div class="product-content">
      <div class="product-name"> <a class="fontcolor" href="#">Motorcycle Leather Boots (4Riders Boots Always)</a>

      </div>
      <div class="price-box">
        <p class="special-price"><span class="price" id="product-price-77">£53.68</span>
        </p>
        <p class="old-price"><span class="price" id="old-price-77">£84.15</span>
        </p> <span class="div-discount"><b>You save </b> <em><i>36.21</i><u>%</u></em></span>

      </div>
      <div class="clr"></div>
    </div>
  </div>
</div>

Answer 1

在此处使用<br/>标记！它打破了这条线

<强> DEMO

<强>更新

将以下属性添加到.product-wrap .item .price-box班级css

<强> DEMO

.product-wrap .item .price-box {
    margin-top: 6px;
    overflow: hidden;
    width:auto; //Set this
    float:left; //and keep it float left
}

Answer 2

添加Css

.div-discount b, .div-discount em{display:block;}

Answer 3

span.div-discount {
    /* display: block; */
    clear: left;
    display: block;
}

只需将此添加到您的css即可使用

这是演示请注意

DEMO

Answer 4

您的段落设置为浮点数，这很好，但您需要清除并将其包装在div中并将div设置为阻止，以便扩展填充宽度。

然后你想把div-discount类设置为阻止。

CSS：

.amounts {
    display: block;
}
.div-discount {
    color: #b50016;
    display: block;
}
.clr-both {
    clear: both;
}

HTML：

<div class="amounts">
    <p class="special-price"><span class="price" id="product-price-77">£53.68</span>
    </p>
    <p class="old-price"><span class="price" id="old-price-77">£84.15</span>
    </p> 
    <div class="clr-both"></div>
</div>
<span class="div-discount"><b>You save </b> <em><i>36.21</i><u>%</u>

请参阅jsFiddle

Answer 5

HTML中的b元素代表粗体。在CSS中添加规则定义显示为内联。这意味着具有内联或内联块属性的元素将显示在同一行上。因此，如果我们想在新行上显示自定义文本，我们必须将其样式从显示内联更改为显示为块。

.div-discount b{ display:block;}

如何在新行中显示自定义文本？

5 个答案: