3

我希望将 HTML 中的一个字符与它旁边的字符的顶部对齐。css vertical-align 属性似乎是我想要的，但我遇到了一些麻烦。

使用vertical-align: text-top似乎没有做我想要的，但我认为应该从阅读规范中得到。

目前，我使用vertical-align: 10%的是一个合理的解决方案，除了我必须在每个平台上计算正确的数字以使其看起来正确。浏览器检测将值设置为我认为可能正确的值似乎是错误的解决方案。

4

4 回答 4

2

试试<sup>标签。这意味着你正在尝试做的事情。实现它之后，你可以使用 css 对其进行更多控制。

示例：M<sup>c</sup>Phe产生 M c Phe

http://www.w3schools.com/TAGS/tag_sup.asp

如果“c”太小，就做<style> sup { font-size: 9pt } </style>或类似的事情。

于 2010-02-20T00:31:02.113 回答
2

其中一些想法在正确的轨道上，但没有一个完全奏效。我最终将 Josh Stdola 的使用text-transform: uppercase;建议与 Keltex 的建议结合使用，即使用较小字体的大写字母来使用伪小型大写字母，即使使用表格是不必要的。

它仍然依赖于字体大小和行高，但我至少可以通过这种方式获得更一致的效果。

使用的建议<sup>并不是很有帮助，因为无论如何我都必须覆盖它的所有样式，所以它与<span>. 语义上可能存在差异，但足够小以至于无关紧要。

于 2010-02-21T07:23:11.713 回答
1

安东尼对这个问题的评论给了我一个想法，用语义正确的<sup>标签包装“c”（或者我猜你可以继续使用 a <span>），然后text-transform: uppercase;在上面使用 CSS。

于 2010-02-20T01:07:25.743 回答
0

丑陋，但你可以使用表格单元格。

首先定义一些样式：

.bigletter
{
  font-size:20px;
  line-height:20px;
}
.upletter
{
  font-size:14px;
  line-height:14px;
  vertical-align:top;
}
.downletter
{
  font-size:14px;
  line-height:14px;
  vertical-align:bottom;
}

然后是html：

<tr>
  <td class='bigletter'>M</td>
  <td class='upletter'>C</td>
  <td class='bigletter'>P</td>
  <td class='downletter'>hexxx</td>
</tr>
于 2010-02-20T00:41:45.497 回答