垂直移动<hr />

Question

我试图在html中添加一行。我找到了＆＃39; hr＆＃39;标签但看起来它在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

如果不是你想要的，请告诉我，我会再做一个例子。

Answer 2

现在使用hr通常被认为是一种不太好的做法，因为它仅用作视觉元素而没有任何上下文含义。我们改为使用border。

P.S。：在代码中添加内联样式也是一种不好的做法。也许你只是为了这个例子而做到了，但在现实生活中，只要有可能就更喜欢外部的css文件。