Какой тег CSS создает такое поле с заголовком?
Ответы 7
Насколько я знаю (поправьте меня, если я ошибаюсь!), Нет.
Я бы рекомендовал вам использовать div с отрицательным значением поля h1 внутри. В зависимости от семантической структуры вашего документа вы также можете использовать набор полей (HTML) с одной легендой (HTML) внутри, которая по умолчанию выглядит примерно так.
Я считаю, что вы ищете HTML-тег fieldset, который затем можно стилизовать с помощью 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, поэтому, вероятно, тег fieldset не разрешен или что-то в этом роде
Стоит отметить, что наборы полей должны использоваться только для форм.
от 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>Это даст вам то, что вы хотите
<head>
<title></title>
<style type = "text/css">
legend {border:solid 1px;}
</style>
</head>
<body>
<fieldset>
<legend>Test</legend>
<br /><br />
</fieldset>
</body>
Если вы не используете его в формах и вместо этого хотите использовать его в нередактируемой форме, вы можете сделать это с помощью следующего кода:
.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>Вы можете попробовать это.
<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>
Думаю, этот пример тоже может кому-то пригодиться:
.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>
Спасибо, да вы правы! Я искал вариант набора полей / легенды. Спасибо