HTML——在页面上给 fieldSets 一些结构

Question

我遍历列表以在页面上创建字段集。最后一个字段集在左下角，它看起来很疯狂我可以对我的布局做些什么来使这些字段集在页面上看起来不错吗？

html:

<table width="100%">
<tr>

    <td width="50%" align="center">

    </td>
 </tr>

 </table>

     <table class="data_table" width="100%">

  <tr>
        <th>
            <span onclick="toggleDiv('displayFields', 'displayImg')" style="cursor: hand;">Data Fields&nbsp;<img name="displayImg" src="../images/minus.gif" /></span>
        </th>

    </tr>

    <tr>
        <td>


            <div id="displayFields" style="display:block;">

                <c:forEach items="${detFieldMap}" var="detFieldEntry">     
                    <fieldset class="det">         
                        <legend>${detFieldEntry.key}</legend>  

                            <c:forEach items="${detFieldEntry.value}" var="detBean">            
                            <input type="checkbox" name="fieldNames" value="${detBean.fieldName}">${detBean.displayName}</input>            
                              </br>    
            </c:forEach>     
            </fieldset> 
            </c:forEach>

            </div>
            <tr>
            <td style="text-align: center;">
            <input type="button" name="clear_choice"  value="Check All" onclick="checkUncheck(true);"/>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <input type="button" name="clear_choice"  value="Uncheck All" onclick="checkUncheck(false);"/>

            </td>
            </tr>

        </td>
        </tr>

</table>

CSS:

/*css. */
table.det
{
}

 table.det td
 {
 border: none;

 }
/* This groups small (16x16) icons using a border and a label. */
fieldset.det 
{     
display:block;
float:left;

font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
margin-top:20px;
margin-left:20px;
border:2px solid #CCCCCC;

}
 fieldset.det legend
{
    padding:2px 5px;
    border:2px solid #CCCCCC;
    font-weight:  bold;


}

Answer 1

如果你想拥有所有<fieldset> s 在单个表格行中 <td>在不同的表列中彼此相邻 <td> s，那么你应该把每个放在自己的 <td> .这样表格布局得以保持。

例如

<table class="data_table" width="100%">
    <tr>
        <th colspan="${fn:length(detFieldMap)}">
            <span onclick="toggleDiv('displayFields', 'displayImg')" style="cursor: hand;">Data Fields&nbsp;<img name="displayImg" src="../images/minus.gif" /></span>
        </th>
    </tr>
    <tr id="displayFields">
        <c:forEach items="${detFieldMap}" var="detFieldEntry">     
            <td>
                <fieldset class="det">         
                    <legend>${detFieldEntry.key}</legend>  
                    <c:forEach items="${detFieldEntry.value}" var="detBean">            
                        <input type="checkbox" name="fieldNames" value="${detBean.fieldName}">${detBean.displayName}</input>            
                        </br>    
                    </c:forEach>     
                </fieldset> 
            </td>
        </c:forEach>
    </tr>
    <tr>
        <td colspan="${fn:length(detFieldMap)}" style="text-align: center;">
            <input type="button" name="clear_choice"  value="Check All" onclick="checkUncheck(true);"/>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <input type="button" name="clear_choice"  value="Uncheck All" onclick="checkUncheck(false);"/>
        </td>
    </tr>
</table>

请注意，我还修复了嵌套 <tr> 的无效 HTML作为 <td> 的直接子代.使用 http://validator.w3.org自己确定 HTML 语法错误。