哪个 CSS 标记创建了一个这样的带有标题的框？
Posted
技术标签:
【中文标题】哪个 CSS 标记创建了一个这样的带有标题的框？【英文标题】：Which CSS tag creates a box like this with title? 【发布时间】：2010-09-11 22:26:12 【问题描述】：我想创建一个这样的带有标题的框：
如果有默认的 CSS 标签可以做到这一点，谁能告诉我？还是我需要创建我的自定义样式？
【问题讨论】：
【参考方案1】：我相信您正在寻找 fieldset html 标签，然后您可以使用 CSS 设置样式。例如，
<fieldset style="border: 1px black solid">
<legend style="border: 1px black solid;margin-left: 1em; padding: 0.2em 0.8em ">title</legend>
Text within the box <br />
Etc
</fieldset>【讨论】：
你应该在你的答案中复制这个确切的 html 代码（除了你已经存在的 html 源代码）。此代码将在这篇文章中进行解释和显示，这将表明它的工作方式与宣传的完全一样。我还不能编辑你的帖子来做到这一点...... VonC，我尝试这样做，但它剥离了我所有的 HTML。只留下我的文字。 它只允许基本的文字 HTML，所以它可能是不允许使用字段集标签或类似的东西 值得注意的是，字段集仅用于表单。 @Buzz 为什么？有什么缺点？【参考方案2】：如果您没有在表单中使用它，而是想在不可编辑的表单中使用它，您可以通过以下代码执行此操作 -
.title_box
border: #3c5a86 1px dotted;
.title_box #title
position: relative;
top: -0.5em;
margin-left: 1em;
display: inline;
background-color: white;
.title_box #content <div class="title_box" id="bill_to">
<div id="title">Bill To</div>
<div id="content">
Stuff goes here.<br> For example, a bill-to address
</div>
</div>【讨论】：
【参考方案3】：来自http://www.pixy.cz/blogg/clanky/css-fieldsetandlabels.html
fieldset
border: 1px solid green
legend
padding: 0.2em 0.5em;
border: 1px solid green;
color: green;
font-size: 90%;
text-align: right;
<form>
<fieldset>
<legend>Subscription info</legend>
<label for="name">Username:</label>
<input type="text" name="name" id="name" />
<br />
<label for="mail">E-mail:</label>
<input type="text" name="mail" id="mail" />
<br />
<label for="address">Address:</label>
<input type="text" name="address" id="address" size="40" />
</fieldset>
</form>【讨论】：
【参考方案4】：这会给你你想要的
<head>
<title></title>
<style type="text/css">
legend border:solid 1px;
</style>
</head>
<body>
<fieldset>
<legend>Test</legend>
<br /><br />
</fieldset>
</body>
【讨论】：
【参考方案5】：据我所知（如果我错了，请纠正我！），没有。
我建议您使用内部带有负边距 h1 的 div。根据文档的语义结构，您还可以使用带有一个图例 (HTML) 的字段集 (HTML)，其中默认情况下大致如下所示。
【讨论】：
谢谢，是的，你是对的！我正在寻找字段集/图例选项。谢谢【参考方案6】：我认为这个例子对某人也有用：
.fldset-class
border: 1px solid #0099dd;
margin: 3pt;
border-top: 15px solid #0099dd
.legend-class
color: #0099dd;
<fieldset class="fldset-class">
<legend class="legend-class">Your Personal Information</legend>
<table>
<tr>
<td><label>Name</label></td>
<td><input type='text' name='name'></td>
</tr>
<tr>
<td><label>Address</label></td>
<td><input type='text' name='Address'></td>
</tr>
<tr>
<td><label>City</label></td>
<td><input type='text' name='City'></td>
</tr>
</table>
</fieldset>【讨论】：
【参考方案7】：你可以试试这个。
<fieldset class="fldset-class">
<legend class="legend-class">Your Personal Information</legend>
<table>
<tr>
<td><label>Name</label></td>
<td><input type='text' name='name'></td>
</tr>
<tr>
<td><label>Address</label></td>
<td><input type='text' name='Address'></td>
</tr>
<tr>
<td><label>City</label></td>
<td><input type='text' name='City'></td>
</tr>
</table>
</fieldset>
DEMO
【讨论】：
以上是关于哪个 CSS 标记创建了一个这样的带有标题的框？的主要内容，如果未能解决你的问题，请参考以下文章