如何在不诉诸耦合或绝对尺寸的情况下调整li标签的大小?

时间:2010-06-29 23:48:23

标签: css xhtml

我的印象是,设置列表项的样式的最佳方法是包装其内容,将样式应用于ol,并通过wapper覆盖该样式(如Make ABC Ordered List Items Have Bold Style中所述)。

这很简单,但由于相对大小是根据继承的大小计算的,因此“覆盖”步骤需要在li及其内容之间进行一定程度的不必要的耦合。例如:

HTML:

<ol>
<li><p>First item</p></li>
<li><p>Second item</p></li>
</ol>

CSS:

ol {
  font-size 2em;
}
p {
  font-size: .5em;
}

上面将正确地加倍ol的字体大小,并将所包含的p的加倍大小减半(即它将保持原始大小)。希望你能在这里看到问题 - 如果我想将li的字体大小增加三倍,我还必须将p的字体大小更改为.33以抵消相对增加。

我想在最佳实践的名义中使用相对大小,但也希望避免这种令人讨厌的耦合。有没有办法让我的蛋糕也可以吃?我知道这不是什么大问题,通常这只是相对大小的工作方式,但是由于几乎一个黑客开始的耦合使我觉得有点脏,所以我想我会四处询问。

1 个答案:

答案 0 :(得分:1)

为什么不创建诸如

之类的规则
ol p { font-size:2em; }

你可以根据需要指定字体大小,这种方式没有耦合,唯一的问题是没有相对字体大小,除非你使用百分比而不是字体的固定大小。