Question

我在这里有一个非常有趣的工作，我正在研究它并且非常有趣但是有时候这样的问题浪费我们的时间而且我们会感到困惑。我想要实现的简单事情是。产品名称 44欧元30欧元与销售红线添加到购物车按钮我很简单，我想在单个中显示两个pries。

HTML

 <div class="product-Detail">
<h4>Product Name</h4>
<p>79.00 &#163;</p>
<p style="color:#F16161; text-decoration:line-through;">59.00 &#163;</p>
<p>
<a href="#" class="btn btn-info">ADD TO CART</a>
</p>
</div>

CSS

 h4 {
    font-size: 14px;
    font-weight: bold;
    font-family: sans-serif;
}

.product-Detail {
    width: 250px;
    text-align: center;
    text-transform: uppercase;
}

.product-Detail p {
    font-size: 14px;
    display: inline;
}

Answer 1

<p style="display:block">
    <a href="#" class="btn btn-info">ADD TO CART</a>
</p>

或者

.product-Detail .btn{
    display:block; 
}

现在您的链接将在另一条线上。

Answer 2

这是非常干净的CSS，目标是第3 <p>

.product-Detail p:nth-of-type(3) {
    display: block;
}

http://jsfiddle.net/U5Tfp/3/

Answer 3

在您的代码中，所有p标记都是内联的，这就是为什么按钮也是对齐的。

您可以在display:block代码上提供a来破解它。检查 DEMO 。

.product-Detail p a.btn{display:block;} /*Responsible for making a tag as block level element*/

如何可分离地定位div标签属性

3 个答案: