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

Question

如果有任何方法可以使盒子看起来像 here 和 HTML/CSS:

Answer 1

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

来自 MDN：

<fieldset>

The HTML <fieldset> element is used to group several controls as well as labels (<label>) within a web form.

<label>

The HTML Label Element (<label>) represents a caption for an item in a user interface.

如前所述，在创建表单时使用 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;
}

以上代码呈现如下：

DEMO

Answer 2

在其中使用 fieldset 标签和 legend。示例：

<fieldset>
    <legend>I'm A Box</legend>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</fieldset>

Answer 3

您可以使用 "position absolute"，如下所示：

.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>

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

How to make a box with a title on its border in HTML?

html

css