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设置为position：absolute top and right：

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

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;
}

文本与边框对齐

2 个答案: