其中CSS标签创建这样的标题与一箱？(Which CSS tag creates a box lik

我想创建这样与标题框：

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

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

Answer 2:

如果您没有在窗体中使用它，而是要在一个不可编辑的形式使用它，您可以通过下面的代码做到这一点 -

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

Answer 3:

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

Answer 4:

这会给你想要的东西

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

Answer 5:

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

我建议你使用一个div负利润-H1内。根据您的文档的语义结构，你也可以使用一个字段（HTML）与一个传奇（HTML）内，其大约是这样的默认。

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

Answer 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

文章来源: Which CSS tag creates a box like this with title?