与边框对齐的文本

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|

我试图得到的效果基本上是一个角落。"其他内容"之后的垂直线应链接到来自"这是一个测试"的行。我在对齐文本时遇到问题。现在我的垂直线高于水平线。对于我可能展示的所有不良做法，我再次道歉，但我真的很感激对此的任何帮助。CSS对我来说是一个可怕的时期。提前谢谢。

Answer 1

将

两者包装在公共position:relative;父级
中并将 #test 设置为位置：绝对顶部和右侧：

.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>

Answer 2

在定位这些项目时，您应该注意记住网站的框架，但是如果您放大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: 75px;
 position: relative;
 float: left;
 margin-top: 12px;
 margin-left: -75px;
}