Tôi muốn tạo ra một hộp như thế này với tiêu đề:Thẻ CSS nào tạo ra một hộp như thế này với tiêu đề?
Bất kỳ một thể xin vui lòng cho tôi biết nếu có một CSS thẻ mặc định để làm điều này? Hoặc tôi có cần tạo kiểu tùy chỉnh của mình không?
Tôi tin rằng bạn đang tìm kiếm thẻ HTML fieldset, sau đó bạn có thể tạo kiểu với CSS. Ví dụ:
<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>
Theo như tôi biết (sửa tôi nếu tôi sai!), Không có.
Tôi khuyên bạn nên sử dụng div có giá trị âm-lề-h1 bên trong. Tùy thuộc vào cấu trúc ngữ nghĩa của tài liệu của bạn, bạn cũng có thể sử dụng một fieldset (HTML) với một chú giải (HTML) bên trong mà xấp xỉ trông như thế này theo mặc định.
Cảm ơn, có bạn là đúng! Tôi đang tìm kiếm tùy chọn fieldset/legend. Cảm ơn – Mozammel
từ 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>
này sẽ cung cấp cho bạn những gì bạn muốn
<head>
<title></title>
<style type="text/css">
legend {border:solid 1px;}
</style>
</head>
<body>
<fieldset>
<legend>Test</legend>
<br /><br />
</fieldset>
</body>
Nếu bạn không sử dụng nó trong các hình thức, và thay vào đó muốn sử dụng nó trong một phi biểu mẫu có thể chỉnh sửa, bạn có thể thực hiện điều này thông qua mã sau -
<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>
Và trong tệp 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 {
}
Chỉ cần thử điều này.
<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>
Tôi nghĩ rằng ví dụ này cũng có thể có ích cho ai đó:
.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>
bạn nên sao chép mã html chính xác này trong câu trả lời của bạn (ngoài mã nguồn html của bạn đã có). Mã này sẽ được diễn giải và hiển thị trong bài đăng này, và điều đó sẽ cho thấy nó hoạt động chính xác như được quảng cáo. Tôi chưa thể chỉnh sửa bài đăng của bạn để làm điều đó ... – VonC
VonC, tôi đã thử làm điều đó, nhưng nó đã loại bỏ tất cả HTML của tôi. Chỉ để lại văn bản của tôi. – Athena
Nó chỉ cho phép HTML văn bản cơ bản do đó có lẽ thẻ fieldset không được phép hoặc một cái gì đó tương tự như vậy –