html - 文本与边框对齐

Question

我使用的可能有很多不好的做法，因为我是 HTML 和 CSS 的初学者，所以在对这篇文章投反对票时请记住这一点到互联网最黑暗的深处.我的问题是我想制作一行打断水平边框的文本，但是我想要它后面的文本与原始文本对齐。这是我到目前为止的代码。HTML:

<h2 style = "float:left; width:500px"><span>This is a test</span></h2>
<div id = "test">
    <p>Other stuff</p>
</div>

CSS:

h2 {
 text-align: center; 
 border-bottom: 1px solid #000; 
 line-height: 0.1em;
 margin: 10px 0 20px; 
}
h2 span { 
 background:#fff; 
}
#test{
 border-right: 1px solid black;
 width: 50px;
 position: relative;
 float: left;
}

我希望它看起来像这样:

 -----This is a test -------------------------------
                                        Other Stuff|

我想得到的效果基本上是一个 Angular 。 “Other stuff”之后的竖线应该链接到来自“This is a test”的那一行。我在对齐文本时遇到问题。现在我的垂直线超出了水平线。对于我可能展示的所有不良做法，我再次表示歉意，但我真的很感激为此提供的任何帮助。 CSS 对我来说是一段可怕的时光。提前致谢。

Answer 1

将两者包装在一个共同的 position:relative; parent
并将 #test 设置为 position:absolute top and right:

.container{ /* added */
  width:500px;
  position:relative; /* in order to contain absolute children */
}
h2 {
 /*float:left; no need to */
 /*width:500px; now container has it */
 text-align: center; 
 border-bottom: 1px solid #000; 
 line-height: 0.1em;
 margin: 10px 0 20px; 
}
h2 span { 
 background:#fff; 
}

#test{
 border-right: 1px solid black;
 width: 50px;
 /*position: relative; set to absolute! */
  position:absolute;
  top:2px; /* added */
  right:0; /* added */
 /*float: left; no need to */
}

<div class="container">
  <h2><span>This is a test</span></h2>
  <div id = "test">
    <p>Other stuff</p>
  </div>
</div>