哪个CSS标签会创建带有标题的类似框？
时间：2020-03-06 14:31:40 来源:igfitidea点击:
我想创建一个带有标题的框：
有人可以让我知道是否有默认的CSS标记吗？还是我需要创建自定义样式？
解决方案
据我所知(如果我错了，请纠正我！)，还没有。
我建议我们使用内部带有负利润-h1的div。根据文档的语义结构，我们还可以使用带有一个图例(HTML)的字段集(HTML)，默认情况下，该图例大致类似于此图例。
我相信我们正在寻找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>
来自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>
这会给你你想要的
<head>
<title></title>
<style type="text/css">
legend {border:solid 1px;}
</style>
</head>
<body>
<fieldset>
<legend>Test</legend>
<br /><br />
</fieldset>
</body>
如果我们不是在表单中使用它，而是想以不可编辑的形式使用它，则可以通过以下代码进行操作-
<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>
并在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 {
}
