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

ħ

1.01

我希望文本分别与左下角的1和1.01位于同一行。

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

Answer 1

HTML中的

h1 - h6是块元素，这意味着它们通常会拉伸以填充其容器并在其两侧都有一个空行。如果您希望它们彼此相邻（可能在同一行上），则需要在它们上设置display: inline以将它们强制转换为常规内联元素。您可能还需要调整margin以使它们彼此更紧密地坐在一起。

示例CSS：

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

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

格式化单元格数据

1 个答案: