CSS：Class中的类

Question

创建了两个自定义类，目的是实现以下结果：

我的CSS：

.custom_ccy_pricing {
    font-size:20px;
    top:-35px;
    position:relative;
    color:grey;
}

.custom_pricing {
    font-size:80px;
    font-family: ‘Raleway’;
    float:right;
    color: #7ebec5;
    font-weight:300;
}

我的HTML：

 <div class="custom_ccy_pricing">$
     <div class="custom_pricing">50</div>
 </div>

无论如何，我似乎无法实现上述目标 - wordpress会自动将<p>分配给文本，如下所示（以及最终结果）：

结果：

谢谢！

Answer 1

尝试使用<span>代替<div>作为文字。

HTML：

<div class="pricing_holder">
<span class="custom_ccy_pricing">$
<span class="custom_pricing">50</span>
</span>
</div>

CSS：

.custom_ccy_pricing {
font-size:20px;
*top:-35px;
position:relative;
color:grey;
width: 100px;
}

.custom_pricing {
font-size:80px;
font-family: ‘Raleway’;
float:right;
color: #7ebec5;
font-weight:300;
}
.pricing_holder {
width: 100px;
}

我不确定它是否适用于wordpress。

Answer 2

制作本：

<div class="custom_ccy_pricing">$
     <div class="custom_pricing">50</div>
</div>

此：

<div class="custom_ccy_pricing">$
     <span class="custom_pricing">50</span>
</div>

span标记专门用于样式文字。每次你创建一个新的div时，它都会为你创建一个换行符，因为它是一个块元素。

span是一个内联元素，因此没有这样的换行符。

Answer 3

只需将HTML写在一行就可以摆脱讨厌的p标签......

<div class="custom_ccy_pricing">$<div class="custom_pricing">50</div></div>

然而，p标签不是你唯一的问题！您还需要将数字（div.custom_pricing）与美元符号（div.custom_ccy_pricing）保持在一起。你已经有了一些建议使用div来进行div.custom_pricing的答案，但如果你真的需要浮动它，这对你不起作用。使用跨度的唯一原因是强制执行 display：inline 行为，这与浮动不兼容。

我建议完全不同的东西：将美元符号添加为 :: before 伪元素。我就是这样做的：

HTML

<div class="custom_pricing">50</div>

CSS

.custom_pricing::before {
color: gray;
content: "$";
font-size: 20px;
font-weight: normal;
position: absolute;
top: -35px; left:0;
}

.custom_pricing {
font-size:80px;
font-family: ‘Raleway’;
float:right;
color: #7ebec5;
font-weight:300;
}

您可能希望在此处详细了解伪元素的精彩内容：http://css-tricks.com/pseudo-element-roundup/