css - 格式化单元格数据

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

我希望文本分别与左 Angular 和右 Angular 的 1 和 1.01 在同一行。

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

Answer 1

h1 - HTML 中的 h6 是 block 元素，这意味着它们通常会拉伸(stretch)以填充容器，并且两边各有一个空行他们中的。如果您希望它们并排放置，也许在同一行，则需要在它们上设置 display: inline 以将它们强制为常规内联元素。您可能还需要调整 margin 以使它们彼此靠得更近。

示例 CSS:

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

但是，这不一定是我要做的方式。就我个人而言，我会把它们放在 div 中，position: relative 然后按照我想要的方式绝对定位 h6 元素。 See example Fiddle