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

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所说,使用fieldset.要展开,然后应用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>