格式化单元格数据

Question

我正在写一个相当(应该是)简单的HTML5网站，这是一个元素周期表的HTML5表。我尝试格式化每个单元(每个元素)的数据，以显示元素的缩写、原子序号和原子量。我编写了几个CSS类来格式化表格中的这些单元格，但它会在单元格中的新行上呈现每条信息。如何才能将所有数据都放在同一行上，使其适合单元格的位置？

以下是CSS类：

/* class for element abbreviation */
h2
{
text-align:center;
font-size:12px;
}

h6.anum
{
text-align:left;
vertical-align:top;
font-size:8px;
}

h6.aweight
{
text-align:right;
vertical-align:top;
font-size:8px;
}

下面是HTML5代码中的相关条目：

<td><h6 class="anum">1</h6><h2>H</h2><h6 class="aweight">1.01<h6></td>

这在单元格中或多或少显示如下：

1

H

1.01

我希望文本在同一行上的1和1.01分别在左边和右边的角落。

我承认，从设计的角度来看，这可能做得非常糟糕，但这是我的第一个HTML类，所以...我还在学习。

Answer 1

HTML中的h1 - h6是块元素，这意味着它们通常伸展以填充其容器，并且在它们的两侧都有一个空行。如果您希望它们彼此相邻，可能在同一行上，则需要在它们上设置display: inline，以强制它们成为常规的内联元素。您可能还需要调整margin，以使它们彼此坐得更近。

示例CSS：

h1 {
    display: inline;
    margin: 0.25em auto;
    /* More styles */
}

然而，这并不一定是我要做的事情。就我个人而言，我会将它们放在一个带有position: relative的div中，然后完全按照我想要的方式放置h6元素。See example Fiddle