IE7：样式Bootstrap表单 - 水平字段集/图例看起来像控件组标签

Question

我正在使用Bootstrap建立一个标准表单。部分表单字段包含复选框或广播选项，因此我希望使用fieldset和服务员legend将选项与其类别相关联。

如果您之前听过这个，请阻止我，但我在为IE7设置表单时遇到问题。具体做法是：

1. legend似乎会导致换行，所以
2. 我似乎无法将单选按钮（或复选框）“留在”右栏中。

此图片展示了第一行（红色框）中的“错误”布局，以及我试图在第二行（绿色框）中实现的布局。



让我们转到HTML：

<form name="form_search" id="form_search" action="acrq_results.html" method="post" class="form-horizontal">
<fieldset>
    <legend>Regular legend not classed `.control-label`</legend>
    <div id="div_search_type" class="control-group">
    <fieldset>
        <legend class="control-label">With fieldset and legend.control-label</legend>
        <div class="controls">
            <label for="p_search_type1" class="radio inline span2"><input type="radio" name="p_search_type" id="p_search_type1" value="both" checked="checked"  />Option 1</label>
            <label for="p_search_type2" class="radio inline span2"><input type="radio" name="p_search_type" id="p_search_type2" value="passport_only"/>Option 2</label>
            <label for="p_search_type3" class="radio inline span2"><input type="radio" name="p_search_type" id="p_search_type3" value="crba_only" />Option 3</label>
        </div>
    </fieldset>
    </div>
    <div id="div_other_reason" class="control-group">
        <label class="control-label">no fieldset or legend</label>
        <div class="controls">
            <label for="p_search_type1" class="radio inline span2"><input type="radio" name="p_search_type" id="p_search_type1" value="both" checked="checked"  />Option 1</label>
            <label for="p_search_type2" class="radio inline span2"><input type="radio" name="p_search_type" id="p_search_type2" value="passport_only"/>Option 2</label>
            <label for="p_search_type3" class="radio inline span2"><input type="radio" name="p_search_type" id="p_search_type3" value="crba_only" />Option 3</label>
        </div>
    </div>
</fieldset>
</form>

我已经添加了这些CSS规则以补充Bootstrap附带的内容（但它没有做到这一点）：

legend.control-label, legend.control-label > span {
    border-bottom: 0;
    color: #000;
    cursor: pointer;
    display:inline-block;
    float:left;
    *display:inline;
    *float:none;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    margin-bottom: 5px;
}

我已经在http://jsfiddle.net/jhfrench/zTAHh/的JSFiddle中将所有这些打包在一起。同样，此问题适用于IE7;它在Chrome中看起来不错。

Answer 1

因为你已经尝试过

*display:inline;
*float:none;

尝试将其定位为绝对值。

HTML

<div id="div_search_type" class="control-group">
<fieldset class="group">
    <legend class="control-label">With fieldset and legend.control-label</legend>
    <div class="controls">
        <label for="p_search_type1" class="radio inline span2"><input type="radio" name="p_search_type" id="p_search_type1" value="both" checked="checked"  />Option 1</label>
        <label for="p_search_type2" class="radio inline span2"><input type="radio" name="p_search_type" id="p_search_type2" value="passport_only"/>Option 2</label>
        <label for="p_search_type3" class="radio inline span2"><input type="radio" name="p_search_type" id="p_search_type3" value="crba_only" />Option 3</label>
    </div>
</fieldset>
</div>

CSS

legend.control-label {
    position:absolute;
    left:0;
}
fieldset.group{
    padding-left: 200px; /*width of legend[160px] + space of 40px*/
    position: relative;
}