logo标签列表

为什么我的HTML代码中的<tr>标签在浏览器上没有按顺序显示？

htmlcsshtml-table
3
所以我正在制作一个测试网站。代码可以在下方看到。 

* {
    background: #000000;
    color: #dddddd;
    margin: 0;
    padding: 0;
}

body {
    font-family: Consolas;
}

button.header {
    border-width: 0;
}

table { width: 100%; }
<!DOCTYPE html>
<html lang="en">

    <head>
        <title>test title</title>
        <link rel="stylesheet" href="start.css">
    </head>

    <body>
        <table style="padding-top: 0.8rem;">
            <tr> <!-- Title, Buttons -->
                <th style="text-align: left; padding-left: 0.8rem;">
                    <h1>test site title</h1>
                </th>
                <th style="text-align: right; padding-right: 0.8rem;">
                   <button class="header"> ABOUT </button>
                   <button class="header"> PROJECTS </button>
                   <button class="header"> CONTACT </button>
                </th>
            </tr>
            <tr>
                Test
            </tr>
        </table>
    </body>
</html>

以下是输出结果： browser output 错误在于第二个带有文本“Test”的<tr>标签显示在包含按钮和标题的第一个标签之前。
为什么会这样？我如何影响表格行的顺序？
2个回答
4
3
您需要将 "test" 包裹在 数据单元格 (<td>) 元素中。 

* {
  background: #000000;
  color: #dddddd;
  margin: 0;
  padding: 0;
}

body {
  font-family: Consolas;
}

button.header {
  border-width: 0;
}

table {
  width: 100%;
}
<table style="padding-top: 0.8rem;">
  <tr>
    <th style="text-align: left; padding-left: 0.8rem;">
      <h1>test site title</h1>
    </th>
    <th style="text-align: right; padding-right: 0.8rem;">
      <button class="header"> ABOUT </button>
      <button class="header"> PROJECTS </button>
      <button class="header"> CONTACT </button>
    </th>
  </tr>
  <tr><td>Test</td></tr>
</table>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接