html - 垂直移动

Question

我正在尝试在 html 中添加一行。我找到了“hr”标签，但看起来它在 html 中有一个默认位置。有没有办法将它(或多或少像单词)移动到离文本最近的地方？这是我的代码。 hr标签在div中

 <h5 style="color: black; text-align: left; margin-top: 1px; margin-left: 5px">SONG</h5>
 <h5 style="color: black; text-align: left; margin-top: -46px; margin-left:       280px">ARTIST</h5>
 <h5 style="color: black; text-align: left; margin-top: -46px; margin-left: 555px">ALBUM</h5>
 <h5 style="color: black; text-align: right; margin-top: -46px;">TIME</h5>
 <hr>
 <p color="black" face="verdana" style="margin-top: -20px; margin-left: 5px; font-size:15px">Live like theres no tomorrow</p>
 <hr>

基本上我想用live来分各种歌曲。只是为了确保我没有使用 JavaScript 并且我在 HTML 的基础上。

Answer 1

听起来您只需要一个 html 表格。我在这里给你举了个例子:http://jsfiddle.net/b2boteLj/3/

html:

<table style="width:100%">
  <tr>
      <th><h5>SONG</h5></th>
      <th><h5>ARTIST</h5></th>
      <th><h5>ALBUM</h5></th>
      <th><h5>TIME</h5></th>
  </tr>
  <tr>
      <td>Live like theres no tomorrow</td>
      <td>some artist</td>
      <td>some album</td>
      <td>some time</td>
  </tr>
</table>

CSS:

table, th, td {
    border-top: 1px solid black;
    border-collapse: collapse;
    text-align: left;
}
th {
    background-color: gray;
    color: white;
}
td {
    background-color: red;
    color: white;
}
th,td {
     padding: 5px;
}

这种结构也可以用于条纹交替行等(添加一些CSS)。另外，请注意<td>是表格单元格，<th>是一个表格标题单元格 - 如果您想将不同的 css 参数应用于列标题，这会很有帮助。有关 html 表格及其样式的更多信息，请参阅此处:http://www.w3schools.com/html/html_tables.asp

如果这不是您想要的，请告诉我，我会再举一个例子。