Question

我试图在字段集中重新划分标签和元素之间的空间，并且失败了。在我提供的附加抓取中，我想要恢复每个新元素和fieldset周围的间距。对于我的生活，我似乎无法找到办法。它在FF位un IE8中以正常间距显示正常，似乎是间距加倍。如果有人能告诉我实现这一目标的方法，我会很感激。感谢

HTML

         <fieldset>
            <legend class="fld_company icon-right ui-state-default2 ui-corner-all"><span class="ui-icon ui-icon-circle-plus"></span>Select Company</legend>
                <div class="formMessage">Click again to open</div>
                    <div class="fld_fld">
                     <dl>
                      <dt>
                         <label for="BA_customer">Select a Company:</label>
                      </dt>
                      <dd>
                         <select name="BA_customer" id="BA_customer">
                           <option SELECTED VALUE="">Select a Company</option>
                            <?php
                                do {  
                                ?>
                           <option value="<?php echo $row_Recordsetcust['customer']?>"><?php echo $row_Recordsetcust['customer']?></option>
                            <?php
                                   } 
                                   while ($row_Recordsetcust = mysql_fetch_assoc($Recordsetcust));
                                   $rows = mysql_num_rows($Recordsetcust);
                                   if($rows > 0)
                                   {
                                   mysql_data_seek($Recordsetcust, 0);
                                   $row_Recordsetcust = mysql_fetch_assoc($Recordsetcust);
                                   }
                             ?>
                         </select>
                     </dd>
                    </dl>

            <!--- displays the address and dept from the change function -->

                <div id="BA_dept"></div>
                <div id="BA_address"></div>
          </fieldset>

CSS

legend
        {


        background:#00C621;
        color:#fff;
        font:17px/21px Calibri, Arial, Helvetica, sans-serif;
        padding:0 10px;
        margin:-26px 0 -2px -8px;
        font-weight:bold;
        border:1px solid #f2f2e6;
        border-color:#e5e5c3 #e5e5c3 #666661 #e5e5c3;
        cursor: pointer;

        }



legend.fld_company
        {

        width: 140px;

        }

fieldset.action
        {

        background:#9da2a6;
        border-color:#e5e5e5 #797c80 #797c80 #e5e5e5;
        margin-top:40px;

        }

fieldset
        {

        background:#f2f2e6;
        border:1px solid #e5e5e5;
        border-color:#e5e5e5 #e5e5e5 #666661 #e5e5e5;
        margin:10px 0 36px 0;
        width:490px;
        display:block;
        text-height:10px;
        }

Reduce space between elements

Answer 1

由于浏览器的默认样式，元素在不同浏览器中的呈现方式不同，但从跨浏览器兼容性的角度来看，表单元素是最不一致的。您应该首先重置表单元素和其他相关元素的默认浏览器样式。大多数元素的边距和填充为零。 e.g。

form, fieldset, legend, label, input{ margin: 0; padding: 0;}

然后按照您的方式单独重新设置每个元素的样式。

您还需要重置dl和dd的轮廓和边距以及填充。试试这个..

Answer 2

可能是DT和DD标签有间距。尝试在其周围设置outline以查看，然后将margin和/或padding设置为0px。

如何减少字段集中元素之间的空间

2 个答案: