如何使用CSS让一些文本覆盖在边框上？

Question

如何最好地将边框与文本组合起来，例如：

 ----------- sometext ------------
|                                 |
|              form               |
|                                 |
 ---------------------------------

- hirokuchima

---

将文本放入矩形边框中 - 可能是重复问题？ - hari

@hari：这里可能会有一个副本，但那不是其中之一。 - thirtydot

@hari，那个问题并没有问如何在边框上重叠文本。 - hirokuchima

可能是重复的问题：如何漂亮地隐藏CSS边框的一部分 - You

@hirokuchima：你需要将“sometext”居中吗？ - thirtydot

Answer 1

由于这是一个表单，你应该使用一个fieldset元素。

fieldset {
  text-align: center;
}

<form>
  <fieldset>
    <legend>Some text</legend>
    <p>Stuff</p>
  </fieldset>
</form>

- thirtydot

---

很有趣，结果证明居中legend比回答问题更难。 - thirtydot

图例在不同的浏览器中往往难以保持一致的结果。虽然在语义上是正确的，但实际上却很麻烦。请参考https://dev59.com/am865IYBdhLWcg3wEKSZ。 - Voodoo

Answer 2

方法：

即使不使用表单fieldset，您也可以使用此JSFiddle中的方法（它不使用JavaScript，JSFiddle可用于纯HTML和CSS），我将在这里解释其作用：

这个fiddle演示了将3个div作为顶部单边框区域，由两个div组成，中间有1px的边框，在每一侧各一个，而中间的div仅包含文本，对齐到中心并根据需要填充。

然后，在下面放置一个div，它是主要内容，但只有3条边框（左、右和底部。顶部已由侧栏div创建）。

以下是CSS和HTML，以及JSFiddle链接。

特点：

这种方法应该符合你的所有标准：

• 边框文本位于顶部边框的一部分
• 边框文本居中，可以通过修改CSS在任何位置放置
• 易于更改边框区域的尺寸

CSS：

.wrapper-box { float:left; width:500px; height:150px; }
.side-border { float:left; height:24px; width:199px; border-top: solid black 1px; margin-top:25px; }
.side-border.l { float:left; border-left: solid black 1px; }
.side-border.r { float:left; border-right: solid black 1px; }
.border-text { float:left; height:35px; margin-top:15px; width:100px; text-align:center; }
.box-content { float:left; width:498px; height: 100px; border-left: solid black 1px; border-right: solid black 1px; border-bottom: solid black 1px; }

HTML:

<div class="wrapper-box">
    <div class="side-border l"></div>
    <div class="border-text">Border Text</div>
    <div class="side-border r"></div>
    <div class="box-content"></div>
</div>

额外信息:

如果要修改较长文本的CSS样式，只需减小border-text的宽度，增加侧边框的宽度即可。

这里有JSFiddle示例

希望这对您有所帮助，我也会将其保存以备将来参考 :)。

- JakeJ

Answer 3

1. 定义一个带边框的区块，并在该区块中放置一个标题。

2. 为了使标题重叠在顶部边框上，适当定义负的上边距。

3. 为了让标题周围的线条消失，将标题的背景颜色定义为与原始背景相同。

以下是代码：

<div class="container" style="border: 1px solid black;">
<h4 style="margin-top:-1%; background: white;">Heading</h4>
</div>

- Diptanshu Agrawal

Answer 4

支持前面的答案，fieldset元素出现在HTML 4中，它有助于将表单中类似的项目分组，并创建一组或一组类似的项目，或者您可以包装包含在表单中的所有项目。

例如：

<form><fieldset><legend>Name of your field/Some Text(your case)</legend>

然后您可以在p标签或table中添加标签和输入，但p标签更可取。最后关闭您的fieldset和form标签...并将此类型的代码添加到您的CSS中。

fieldset{
    border: thin dashed #000;
}

您可以通过以下方式为表单元素添加边框。

- Sushanta Patel

Answer 5

非常类似于这个讨论：如何将 <legend> 元素居中 - 使用align:center属性的替代方法是什么？

就像在那里说的那样，如果您想要跨浏览器获得一致的结果，则使用 标签很麻烦。要实现此效果，我会使用 <h> 标签或者 <div> 作为 legend。

以下是一个示例：http://jsfiddle.net/CddE7/

在 Firefox、Chrome 和 IE 7、8、9 的PC上进行了测试。 由于IE版本的不同，<h3> 的垂直位置略有不同，但仅有一点（可能可以优化以获得更加统一的结果）。

因为我认为人们会抱怨使用 <h3> 而不是 <legend>，是的，它并不像语义正确。但是它有效。

- Voodoo