Я хочу создать поле, подобное этому:
Может кто-нибудь, пожалуйста, дайте мне знать, если для этого есть тег CSS по умолчанию? Или мне нужно создать свой собственный стиль?
Я хочу создать поле, подобное этому:
Может кто-нибудь, пожалуйста, дайте мне знать, если для этого есть тег CSS по умолчанию? Или мне нужно создать свой собственный стиль?
Я считаю, что вы ищете тег 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>
Если вы не используете его в формах и вместо этого хотите использовать его в не редактируемой форме, вы можете сделать это с помощью следующего кода -
<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 {
}
из 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 с отрицательным-margin-h1 внутри. В зависимости от семантической структуры вашего документа вы также можете использовать набор полей (HTML) с одной легендой (HTML), внутри которой по умолчанию выглядит так.
Просто попробуйте это.
<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>
Я думаю, что этот пример может быть полезен для кого-то:
.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>