Question

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

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

Answer 1

这称为 fieldset ，它是一个基本的HTML标记。

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

我畏缩地给你一个this site的链接，但它确实能让你在那里试用你的HTML。

Answer 2

尝试“字段集”：

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

Answer 3

你可以在字段集上做一些样式。

stylesheet.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样式将仅应用于input type text且位于fieldset class属性为panel的{{1}}内的fieldset.panel input[type=text]，翻译为css，如下所示：{{1} }}

Div就像面板一样

3 个答案: