如何在我的表格字段周围制作白色方块？

Question

我想像上面那样制作我的HTML和CSS，以显示一个带有围绕这两个表单字段的标题的白框。我准备的HTML只是字段：

<div class="fl20 smallg">&mdash;&mdash; Fysisk person &mdash;&mdash;</div>
        <div class="clear"></div>       
        <div class="fl20">F&ouml;rnamn:</div>
        <div class="fl20"><input type="text" size="60" value="<%=editPerson.getFornamn() %>" name="<%= PandoraFieldConstants.FIELD_FORNAMN %>"></div>
        <div class="clear"></div>
        <div class="fl20">Efternamn:</div>
        <div class="fl20"><input type="text" size="60" value="<%=editPerson.getEfternamn() %>" name="<%= PandoraFieldConstants.FIELD_EFTERNAMN %>"></div>
        <div class="clear"></div>

你能告诉我应该怎么做才能创建标题为“fysisk person”的白框吗？

谢谢

更新

使用fieldset标签几乎可以实现我想要的功能，但我需要将标题放在框架中，如上所示，将整个事物移到左边，因为它在更改后显示在右边，并且有些文字是白色而不是黑色，所以我也需要改变它：

更新

现在我很接近。这是显示我们想要的模型：

这是我迄今为止的结果：

我基本上只需要使用CSS而不是表来执行此操作，并使按钮的文本显示在页面下方的右侧。我怎么能这样完成呢？

现在的代码是

<fieldset class="whiteborder">
         <legend>Fysisk person</legend> 
        <div class="fl20">F&ouml;rnamn:</div>
        <input type="text" size="60" value="<%=editPerson.getFornamn() %>" name="<%= PandoraFieldConstants.FIELD_FORNAMN %>">
        <div class="fl20">Efternamn:</div>
        <input type="text" size="60" value="<%=editPerson.getEfternamn() %>" name="<%= PandoraFieldConstants.FIELD_EFTERNAMN %>">
        </fieldset></td><td>
        <div class="fl20">S&ouml;k person/f&ouml;retag<input type="button" value="S&ouml;k" onClick="getElementById('popupSokNamn').style.display=''"></div></td></tr></table>

Answer 1

您可以使用<fieldset>元素和<legend>元素

所以：

<fielset>
    <legend>my legend</legend>
    <!-- REST OF HTML -->
</fieldset>

并使用css来设计这些样式 请参阅@Joel Etherton获取CSS

Answer 2

正如@Bas Tuijnman所说，使用字段集。要进行扩展，然后应用CSS来增加边框大小并调整显示布局的填充/边距。

JSFiddle

风格：

body { 
    background-color: #333333; 
}

.whiteborder {
    color: #ffffff; 
    border: 3px solid #ffffff; 
    padding: 10px; 
    margin: 10px;
}
​

HTML：

<fieldset class="whiteborder">
    <legend>Fysisk Person:</legend>
    <div class="fl20">F&ouml;rnamn:</div>
    <div class="fl20"><input type="text" size="60" value="<%=editPerson.getFornamn() %>" name="<%= PandoraFieldConstants.FIELD_FORNAMN %>"></div>
    <div class="clear"></div>
    <div class="fl20">Efternamn:</div>
    <div class="fl20"><input type="text" size="60" value="<%=editPerson.getEfternamn() %>" name="<%= PandoraFieldConstants.FIELD_EFTERNAMN %>"></div>
</fieldset>​

编辑：为了让按钮/附加功能与您想要的对齐，您应该将两个块包装在左侧浮动的单独div中。然后对文本块应用适当的填充/边距以获得您正在寻找的间距。

<div style="float: left;">
    <!-- Fieldset html goes here -->
</div>
<div style="float: left; padding: 20px; margin: 10px;">
    <!-- text/buttons markup goes here -->
</div>

Answer 3

检查这个小提琴来解决问题，这样你就可以知道如何实现这个目标 -

小提琴：http://jsfiddle.net/YTQWm/1/

演示：http://jsfiddle.net/YTQWm/1/embedded/result/