Html 哪个 CSS 标签创建了这样一个带有标题的框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/113640/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Which CSS tag creates a box like this with title?
提问by Mozammel
I want to create a box like this with title:
我想用标题创建一个这样的框：
Can any one please let me know if there is a default CSS tag to do this? Or do I need to create my custom style?
任何人都可以让我知道是否有一个默认的 CSS 标签来做到这一点？还是我需要创建我的自定义样式？
回答by Athena
I believe you are looking for the fieldsetHTML tag, which you can then style with CSS. E.g.,
我相信您正在寻找fieldsetHTML 标记，然后您可以使用 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>
回答by Jagath
If you are not using it in forms, and instead want to use it in an non-editable form, you can do this via the following code -
如果您不在表单中使用它，而是想在不可编辑的表单中使用它，您可以通过以下代码执行此操作 -
<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>
And in the CSS file
并在 CSS 文件中
.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 {
}
回答by AlexWilson
from http://www.pixy.cz/blogg/clanky/css-fieldsetandlabels.html
来自http://www.pixy.cz/blogg/clanky/css-fieldsetandlabels.html
<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>
<style type="text/css">
fieldset { border:1px solid green }
legend {
padding: 0.2em 0.5em;
border:1px solid green;
color:green;
font-size:90%;
text-align:right;
}
</style>
回答by naspinski
This will give you what you want
这会给你你想要的
<head>
<title></title>
<style type="text/css">
legend {border:solid 1px;}
</style>
</head>
<body>
<fieldset>
<legend>Test</legend>
<br /><br />
</fieldset>
</body>
回答by Matthias Meid
As far as I know (correct me if I'm wrong!), there isn't.
据我所知（如果我错了，请纠正我！），没有。
I'd recommend you to use a div with a negative-margin-h1 inside. Depending on the semantic structure of your document, you could also use a fieldset (HTML) with one legend (HTML) inside which approximately looks like this by default.
我建议您使用内部带有负边距 h1 的 div。根据文档的语义结构，您还可以使用带有一个图例 (HTML) 的字段集 (HTML)，默认情况下该图例大致如下所示。
回答by riwex
I think this example can also be useful to someone:
我认为这个例子对某人也有用：
.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>回答by Ajay Gupta
You can try this out.
你可以试试这个。
<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>
