div 像面板一样答案

【问题标题】：Div acting like paneldiv 像面板一样
【发布时间】：2012-04-10 07:03:11
【问题描述】：

我有一个带有凹槽边框的 div。我希望它看起来像这个面板：http://www.devmanuals.com/images/images1/444Panel1.gif

图片上的面板标题为“用户注册”。如何让我的 div 有面板一样的标题？

【问题讨论】：

发布您尝试过的内容

标签： html

【解决方案1】：

这叫做fieldset，是一个基本的HTML标签。

  <fieldset>
    <legend>User Registration</legend>
    User name: <input type="text" /><br />
    Password: <input type="text" /><br />
  </fieldset>

我不愿意给你一个指向this site 的链接，但它确实可以让你在那里试用你的 HTML。

【讨论】：

【解决方案2】：

尝试“字段集”：

<fieldset>
    <legend>caption goes here</legend>
</fieldset>

【讨论】：

【解决方案3】：

您可以对字段集进行一些样式设置。

样式表.css

fieldset.panel
{
    border: 1px solid #000;
    width: 200px;
}
fieldset.panel input[type=text]
{
    width: 170px;
}

用法

<fieldset class="panel">
    <legend>User Registration</legend>
    User name:<br/><input type="text"/><br/>
    Email-id:<br/><input type="text"/><br/>
    Password:<br/><input type="text"/><br/>
    Confirm password:<br/><input type="text"/><br/>
    <br/>
    <input type ="submit" value="Register"/>
</fieldset>

基本上它使用一个字段集，但有一些基本样式，css 类panel 将使边框为 1px 纯黑色，输入全部为 170px 宽度，因为 css 样式只会应用于@987654324 @s 其中type 是text 并且在fieldset 中，其class 属性是panel，翻译成这样的css：fieldset.panel input[type=text]。

【讨论】：