问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何在 HTML 中制作一个边框带有标题的框？

社区维基
1
新手上路，请多包涵

如果有任何方法可以使一个盒子看起来像 这里 使用 HTML/CSS 的盒子：

在此处输入图像描述

原文由 user5955461 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcss
阅读 864
2 个回答
得票最新
社区维基
1
✓ 已被采纳

您可能正在寻找适用于表单的 HTML fieldset 和 legend 元素。

来自 MDN：

<字段集>

HTML <fieldset> 元素用于在 Web 表单中对多个控件和标签 ( <label> ) 进行分组。

<标签>

HTML 标签元素 ( <label> ) 表示用户界面中项目的标题。

如前所述，创建表单时会使用 fieldset 和 legend 元素。

如果你只是想在边框上放置一个标签框，你可以使用绝对定位，像这样：

HTML

 <div id="container">
    <div id="label">I'm a Box</div>
</div>

CSS

 #container {
    height: 100px;
    width: 300px;
    border: 1px solid black;
    position: relative;
}

#label {
    position: absolute;
    top: -10px;
    left: 20px;
    height: 20px;
    width: 100px;
    background-color: pink;
    border: 2px solid red;
    text-align: center;
}

上面的代码呈现如下：

在此处输入图像描述

演示

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

您可以使用“绝对位置”，如下所示：

 .a {
  margin-top: 50px;
  height: 100px;
  width: 100%;
  border: 2px solid red;
}

.b {
  position: absolute;
  top: 40px;
  left: 20px;
  border: 2px solid red;
  height: 20px;
  width: 20%;
  background-color: white;
}

 <!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="a">
  <div class="b">test</div>

</div>

</body>
</html>

原文由 liusy182 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏