边框 CSS HTML 中的文本答案

【问题标题】：Text in Border CSS HTML边框 CSS HTML 中的文本
【发布时间】：2022-05-10 17:19:45
【问题描述】：

我想要一个如下所示的 div：

这可能与 HTML + CSS 相关吗？我还将使用 jQuery 为这个 div 设置动画。当 div 被隐藏时，我希望显示标题和顶行。

【问题讨论】：

标签： html css

【解决方案1】：

是的，但不是div，而是fieldset

fieldset {
    border: 1px solid #000;
}

<fieldset>
  <legend>AAA</legend>
</fieldset>

【讨论】：

你可以做一个变通办法......另外，你应该评论一下，而不是把它作为答案发布
我不明白为什么它是一种解决方法，对我来说它是一种解决方案。无论是 div 还是 fieldset，它在功能上有什么区别？
@Bazzz- 这是错误的语义。 “fieldset 元素表示一组表单控件，可选择地分组在一个通用名称下。” - HTML5 规范。控件在哪里？我们真正需要的是display:fieldset CSS 设置。可惜没有。
哇，对不起。我以为你在评论我的回答。没关系
@Alohci 同意！不过，我不认为 OP 说字段集中不会有任何表单控件。仍然可能是他想把表单控件放在里面:)

【解决方案2】：

您可以这样做，在h1（或您正在使用的任何标题）上设置一个否定的margin

div{
    height:100px;
    width:100px;
    border:2px solid black;
}

h1{
    width:30px;
    margin-top:-10px;
    margin-left:5px;
    background:white;
}

注意：您需要在h1 上设置background 和width

示例：http://jsfiddle.net/ZgEMM/

编辑

为了使它能够隐藏div，你可以使用一些像这样的jQuery

$('a').click(function(){
    var a = $('h1').detach();
    $('div').hide();
    $(a).prependTo('body');    
});

（您需要修改...）

示例 #2： http://jsfiddle.net/ZgEMM/4/

【讨论】：

我不喜欢这个答案它有很多限制：上边距与 h1 的字体大小有关，如果以后字体大小发生变化，您需要更新所有边距。背景：白色防止任何背景图像通过 h1 可见，感觉有点不灵活。我只是有一种感觉，使用这种方法就像以后打开更多样式问题一样。只是我的想法。
我喜欢这个。当隐藏里面的div时，有没有办法隐藏侧边和底边？ jsfiddle.net/ZgEMM/3
我问的是如何保留顶部边框并隐藏其他三个，但我决定不这样做。这就是我最终的结果：jsfiddle.net/ZgEMM/10
如果有人尝试打印此页面，您将遇到问题，因为浏览器通常默认忽略背景。
今天和同事讨论了这个问题。为了防止问题定义固定宽度（标题长度不同），我们只使用了浮动。所以我们用float: left;代替width: XXpx;。

【解决方案3】：

我知道聚会有点晚了，但我觉得答案可以通过更多调查/输入来完成。我已经设法在不使用 fieldset 标记的情况下创建了这种情况 - 无论如何这都是错误的，就好像我不在一个表单中那么这不是我应该做的。

/* Styles go here */

#info-block section {
    border: 2px solid black;
}

.file-marker > div {
    padding: 0 3px;
    height: 100px;
    margin-top: -0.8em;
    
}
.box-title {
    background: white none repeat scroll 0 0;
    display: inline-block;
    padding: 0 2px;
    margin-left: 8em;
}

<aside id="info-block">
  <section class="file-marker">
    <div>
      <div class="box-title">
        Audit Trail
      </div>
      <div class="box-contents">
        <div id="audit-trail">
        </div>
      </div>
    </div>
  </section>
</aside>

这可以在这个plunk中查看：

Outline box with title

这样做的结果如下：

不使用字段集。
如果 CSS 仅使用一些填充来创建效果，则最少使用。
使用“em”页边距创建字体相对标题。
使用显示内联块来实现文本周围的自然宽度。

无论如何，我希望这对未来的造型师有所帮助，你永远不会知道。

【讨论】：

尽管比我想要的复杂一点，但我真的很喜欢这个答案，因为它不是另一个 CSS hack 或不好的做法。 +1
您的 Plunker 链接未加载。
@HoldOffHunger 在这里似乎运行良好，您尝试了哪种浏览器？
Firefox，在 Chrome 中加载并完美运行。我希望 html/css 演示不需要更多，但 Chrome 肯定是相当标准的。很高兴看到带有aside/section标签的答案。
@HoldOffHunger 我可能会稍作改进，这可能会对 Firefox 有所帮助，但是我看到 plunkr 目前正在经历一些 Alpha 阶段，所以它可能不是 100%。

【解决方案4】：

带有透明文本背景的边框中的文本

.box{
    background-image: url("https://i.stack.imgur.com/N39wV.jpg");
    width: 350px;
    padding: 10px;
}

/*begin first box*/
.first{
    width: 300px;
    height: 100px;
    margin: 10px;
    border-width: 0 2px 0 2px;
    border-color: #333;
    border-style: solid;
    position: relative;
}

.first span {
    position: absolute;
    display: flex;
    right: 0;
    left: 0;
    align-items: center;
}
.first .foo{
    top: -8px;
}
.first .bar{
    bottom: -8.5px;
}
.first span:before{
    margin-right: 15px;
}
.first span:after {
    margin-left: 15px;
}
.first span:before , .first span:after {
    content: ' ';
    height: 2px;
    background: #333;
    display: block;
    width: 50%;
}


/*begin second box*/
.second{
    width: 300px;
    height: 100px;
    margin: 10px;
    border-width: 2px 0 2px 0;
    border-color: #333;
    border-style: solid;
    position: relative;
}

.second span {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.second .foo{
    left: -15px;
}
.second .bar{
    right: -15.5px;
}
.second span:before{
    margin-bottom: 15px;
}
.second span:after {
    margin-top: 15px;
}
.second span:before , .second span:after {
    content: ' ';
    width: 2px;
    background: #333;
    display: block;
    height: 50%;
}

<div class="box">
    <div class="first">
        <span class="foo">FOO</span>
        <span class="bar">BAR</span>
    </div>

   <br>

    <div class="second">
        <span class="foo">FOO</span>
        <span class="bar">BAR</span>
    </div>
</div>

【讨论】：

非常好的原生解决方案，在多层和其他背景等方面效果很好

【解决方案5】：

<fieldset>
  <legend> YOUR TITLE </legend>
  
  
  <p>
  Lorem ipsum dolor sit amet, est et illum reformidans, at lorem propriae mei. Qui legere commodo mediocritatem no. Diam consetetur.
  </p>
</fieldset>

【讨论】：

【解决方案6】：

您可以使用字段集标签。

<!DOCTYPE html>
<html>
<body>

<form>
 <fieldset>
  <legend>Personalia:</legend>
  Name: <input type="text"><br>
  Email: <input type="text"><br>
  Date of birth: <input type="text">
 </fieldset>
</form>

</body>
</html>

查看此链接：HTML Tag

【讨论】：

这与 Bazzz 的回答有何不同？

【解决方案7】：

对于duplicate，这里是另一个带有转换的选项，没有字段集（副本中需要圆角边框）：

位置或变换也可以帮助您：

* {
  margin: 0;
  padding:0;
  box-sizing:border-box;
}

.fieldset {
  border: solid;
  color: #353fff;
  border-radius: 1em;
  margin: 2em 1em 1em;
  padding:0 1em 1em;
}

.legend {
  transform: translatey(-50%);
  width: max-content;
  background: white;
  padding: 0 0.15em;
}

.fieldset li {
  list-style-type: " - ";
}

<div class="fieldset">
  <h1 class="legend">Some Title</h1>
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>

【讨论】：

【解决方案8】：

如果您无法添加字段集，您可以为元素添加背景。在我的情况下，我在输入元素和输入元素之外有不同的颜色，而且我们有输入元素的悬停颜色。所以这是一个修复，我添加了线性渐变背景，上半部分为外部颜色，下半部分为透明颜色。我在下半部分添加了透明颜色，以便在悬停时看到悬停颜色。

.class-name {
  background: linear-gradient(to bottom, #2a2b2d 50%, transparent 50%);
}

【讨论】：

【解决方案9】：

可以使用图例标签。参考http://www.w3schools.com/html5/tag_legend.asp

【讨论】：

fieldset 和 legend 标签不是 HTML5
嗯，它们仍然存在于 HTML 5 中，所以从技术上讲......它们是 HTML 5 标签。 :)
我只是想澄清一下，我认为将其称为HTML5是正确的，因为自HTML4.01以来界面已经发生了变化。 HTML5 图例界面已废弃 accessKey 和 align 属性，而在 HTML4.01 中它们仅被弃用。所以是有区别的。
正如我所说，那些标签是 not HTML5 这些标签是 HTML。标签不是 HTML5 唯一的标签，如 audio 是。
链接已失效 :(