Html 使用 CSS 在 Web 表单上的某些控件周围创建一个分组框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12571960/
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
Create a group box around certain controls on a web form using CSS
提问by RJ.
I have three controls on my web form of three drop down lists.
我的三个下拉列表的 Web 表单上有三个控件。
I want to create a graphical "box" around these controls. The reason for this is that selecting these controls would be "STEP 1" of my process. So I want to put a box around these controls and call it "Step 1"
我想围绕这些控件创建一个图形“框”。这样做的原因是选择这些控件将是我流程的“第 1 步”。所以我想在这些控件周围放一个框并将其称为“第 1 步”
How would I go about doing this with CSS?
我将如何使用 CSS 来做到这一点？
Example:
例子：
回答by Tim Medora
A fieldsetwith a legendprovides a visual and semantic grouping for form controls. You can then style this as desired with CSS. A fieldsetis somewhat unique in that the legendis capable of visually interrupting the border of its parent fieldset(possible with other elements, but difficult).
fieldset带有 a 的Alegend为表单控件提供了视觉和语义分组。然后，您可以使用 CSS 根据需要设置样式。Afieldset有点独特，因为legend它能够在视觉上中断其父fieldset元素的边界（可能与其他元素一起使用，但很难）。
Example: http://jsfiddle.net/NUMcr/1/
示例：http: //jsfiddle.net/NUMcr/1/
<fieldset>
<legend>Group 1</legend>
<input type="text" />
<asp:Textbox runat="Server" id="txt1" />
<!-- etc -->
</fieldset>
fieldset {
margin: 8px;
border: 1px solid silver;
padding: 8px;
border-radius: 4px;
}
legend {
padding: 2px;
}
回答by Gromer
There is the fieldsetHTML element, which is made for this specific purpose: http://www.w3.org/wiki/HTML/Elements/fieldset. If you are set on using CSS only, you could do something like this:
有一个fieldsetHTML 元素，它是为此特定目的而制作的：http: //www.w3.org/wiki/HTML/Elements/fieldset。如果您设置为仅使用 CSS，您可以执行以下操作：
<html>
<head></head>
<body>
<h1>Step 1</h1>
<div style="border: 1px solid #000000;">
<input type="text" />
<input type="submit" value="Submit" />
</div>
</body>
</html>
You could then style the h1(or whatever type of HTML element you'd like to use for the header) and the divcontaining the input elements.
然后，您可以设置h1（或您想用于标题的任何类型的 HTML 元素）和div包含输入元素的样式。
回答by Jayakrishnan K
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
