Question

我有一个样式表，指定<LABEL>的样式。

但有些<LABEL>是特别的：目前我的内联样式是这样的：

<LABEL style="text-align:right; line-height:15pt">
    <div style="padding-right:20px">My Label Text</div>
</LABEL>

我怀疑有一种方法来指定一个CSS类，可能称为rightlabel，使用这样简单的东西来呈现前面的内容：

<LABEL class="rightlabel">My Label Text</LABEL>

这样做的正确方法是什么？即，有没有办法在CSS中定义rightlabel以生成被覆盖的<LABEL> ，同时自动将其子项包装在填充的子容器中（因为样式不是正确地工作，除非这样做，并且依靠编码器实现两个元素以使风格正确，似乎不合适？）

修正案：我可以使用子选择器获得大部分内容 - 如this fiddle中所示，使用此CSS：

.rightLabel {text-align: right}
.rightLabel > * {padding-right: 20px}

但我无法找到一种方法将填充应用于标签内容，而无需将内容明确地包装在某个容器中。即，上面的CSS在

上正常工作

<LABEL class="rightLabel">
  <div>This is what we wanted!</div>
</LABEL>

但不是

<LABEL class="rightLabel">Why am I not padded?</LABEL>

是否可以将样式应用于<LABEL>内容，而无需在另一个HTML元素（子元素）中明确编码？

Answer 1

定义你的风格：

<style> 
.rightLabel
{
    text-align:right;
}

.rightLabel div 
{
    padding-right:20px;
}
</style>

更新到更新的问题：您无法使用CSS添加div，您需要使用JavaScript。您可以使用：before和：after添加伪元素。

这是一个小提琴https://jsfiddle.net/c3h9a2b9/1/

.rightLabel:before {
  display:block;
  content:' ';
  width:20px;
  float:right;
}

使用标签上的:before或:after伪元素伪造填充。它需要一个块的显示（内联块也可以）和一些尺寸，这里的宽度是20px（＆＃34;填充＆＃34;你需要的）并浮动在你想要填充的方向.... / p>

Answer 2

如果我理解你的问题答案就是这个CSS：

label{
    //Your general label style
}
label.rightlabel{
    text-align: right;
    line-height: 15pt;
}
label.rightlabel div{
    padding-right: 20px;
}

使用此HTML应按您的意愿行事

<label>a normal label</label>
</label class="right label"><div>the special label</div></label>

这是有效的，因为默认情况下更具体的CSS会覆盖不太具体的CSS：）

用于在程式化容器中包装内容的CSS？

2 个答案: