哪个CSS标签创建一个像这样的标题框？

CSS box with title

任何一个可以请让我知道，如果有一个默认的CSS标签来做到这一点？或者我需要创建自定义样式？

2008-09-22 Mozammel

我相信你正在寻找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>

来源

2008-09-22 07:42:46 Athena

你应该在你的答案中复制这个确切的html代码（除了你的html源代码已经存在）。这段代码将被解释并显示在这篇文章中，这将显示它的工作方式与广告完全相同。我还没有能够编辑你的文章做到这一点...... – VonC 2008-09-22 08:09:40

据我所知（纠正我，如果我错了！），没有。

我建议你在里面使用带有负边距h1的div。根据文档的语义结构，您还可以使用带有一个图例（HTML）的字段集（HTML），默认情况下，该图例大致看起来像这样。

来源

2008-09-22 07:41:01

谢谢你，是你是对的！我正在寻找fieldset/legend选项。谢谢 – Mozammel 2008-09-22 07:44:02

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

来源

2008-09-22 07:44:14 AlexWilson

这会给你你想要

<head> 
    <title></title> 
    <style type="text/css"> 
     legend {border:solid 1px;} 
    </style> 
</head> 
<body> 
    <fieldset> 
     <legend>Test</legend> 
     <br /><br /> 
    </fieldset> 
</body>

来源

2008-09-22 07:44:22 naspinski

，如果你没有在窗体中使用它，而是要在非使用它 - 可编辑的形式，你可以通过下面的代码 -

<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 { 
}

来源

2010-05-29 22:59:54 Jagath

刚刚尝试了这一点。

<fieldset class="fldset-class"> 
<legend class="legend-class">Your Personal Inormation</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

来源

2015-08-28 08:43:37

我觉得这个例子也可以对别人有用：

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

来源

2017-03-10 13:01:34 riwex

哪个CSS标签创建一个像这样的标题框？

回答

相关问题