Question

将边框与某些文字结合起来的最佳方式是：

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

Answer 1

与form一样，您应该使用a fieldset element。

请参阅： http://jsfiddle.net/thirtydot/AVGsr/

Answer 2

方式：

即使不使用表单字段集也可以使用任何东西，你可以在这个JSFiddle中使用我的方法（它不使用Javascript，JSFiddle可以用于纯HTML和CSS），我将在这里解释它的作用：

小提琴演示的是有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，只需减小边框文本的宽度，并增加边框的宽度。

JSFiddle Example Here

希望这可以帮助你，我将保留这个以供将来参考：）。

Answer 3

定义带边框的分部，并在该分区中添加标题。
要使标题与顶部边框重叠，请相应地定义负上边距。
要使标题周围的线条消失，请定义与原始背景相同的标题背景颜色。

以下是代码：

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

Answer 4

支持上一个答案，fieldset元素来自html 4，它有助于对表单中的项目进行分组并创建一个类似项目的集合或字段，或者您可以包装表单中包含的所有项目..

e.g。

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

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

fieldset{
    border: thin dashed #000;
}

您可以通过这种方式为表单元素添加边框..

Answer 5

与此讨论非常相似：How to center the <legend> element - what to use instead of align:center attribute?

如前所述，如果您希望跨浏览器获得一致的结果，那么使用标记会很麻烦。要实现此效果，我会使用<h>标记或<div>代替图例。

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

在Firefox，Chrome和IE 7,8,9 for PC中测试过。 <h3>的垂直位置因IE版本略有不同，但只有一点点（并且可能会进一步细化以获得更均匀性）。

由于我假设人们会抱怨使用<h3>而不是<legend>，是的，它在语义上并不正确。但它确实有效。

我怎么能用CSS覆盖边框的文字？

5 个答案: