Html 在 div 中给出边框标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5216020/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Give border title in div
提问by Harry Joy
Can I do like this in HTML:
我可以在 HTML 中这样做吗：
I want to add border title ("General Information" in this image) on my div. Is it possible? How to do it?
我想在我的div. 是否可以？怎么做？
Note:
The image is not HTML page's image, its a Java app's image.
注意：
该图像不是 HTML 页面的图像，而是 Java 应用程序的图像。
回答by
<div id="form" style="width:350px;">
<fieldset>
<legend style="color:blue;font-weight:bold;">General Information</legend>
<table>
<tr>
<td><span style="text-decoration:underline">C</span>hange Password To:</td>
<td><input type="text"/></td>
</tr>
<tr>
<td><span style="text-decoration:underline">C</span>onfirm Password:</td>
<td><input type="text"/></td>
</tr>
</table>
</fieldset>
</div>
回答by amosrivera
The image is possibly using a fieldsettag instead of a div, inside a fieldsetyou can use the tag legendand it will automatically position there.
图像可能使用fieldset标签而不是div，在 a 中fieldset您可以使用标签legend，它会自动定位在那里。
<fieldset>
<legend>General Information</legend>
</fieldset>
回答by Rudrik
<fieldset style="width:100px;">
<legend>
Please Enter Your Name</legend>
<br>
<table>
<tr>
<td>First Name:</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" /></td>
</tr>
</table>
</fieldset>
This will givu u output like this.
这会给你这样的输出。
回答by Kannan Arumugam
Round Border with Background color.
带背景颜色的圆形边框。
<!DOCTYPE html>
<html>
<head>
<style>
.sample
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
}
</style>
</head>
<body>
<div class="sample">
The border-radius property allows you to add rounded corners to elements.
<fieldset style="width:100px;">
<legend>
Please Enter Your Name</legend>
<br>
<table>
<tr>
<td>First Name:</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>First Name:</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" /></td>
</tr>
</table>
<input type="submit" value="Submit">
</fieldset>
</div>
</body>
</html>
This will give output like this,
这将给出这样的输出，
