Html IE7：将引导表单水平字段集/图例设置为类似于控制组标签的样式

我正在使用创建一个标准表单。一些表单字段包括复选框或单选选项，因此我想使用字段集和伴随的图例将选项与其类别相关联

如果您以前听过，请阻止我，但我在为IE7设计表单时遇到问题。具体而言：

这个传说似乎导致了断线，所以 我似乎无法使单选按钮或复选框保持在正确的列中。 这张图片用红色方框展示了第一行的糟糕布局，而我试图在第二行的绿色方框中实现的布局

图例似乎会导致换行，因此我似乎无法使单选按钮或复选框保留在正确的列中。>

让我们转到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>

我已经在一个JSFiddle中打包了所有这些内容。同样，这个问题是针对IE7的；它在铬合金上看起来不错。

因为你已经试过了

尝试将其定位为绝对

HTML

既然你试过了

尝试将其定位为绝对

HTML

---

如果你的客户要求支持IE7，解雇你的客户。截至2013年初，它的用户份额为0.3-0.5%，但它需要30-50%的额外工作。我知道，我正在努力。我们就说这个客户相当大。不过，我仍然需要正确的布局。如果您的客户要求支持IE7，请解雇您的客户。截至2013年初，它的用户份额为0.3-0.5%，但它需要30-50%的额外工作。我知道，我正在努力。我们就说这个客户相当大。不过，我仍然需要把这个布局弄对。你能用小提琴演示一下吗？这是最新的。虽然对于文本包装，我必须在“和”后面加上一个br标记，带有字段集和图例。control-label“谢谢，这使我达到了95%的效果。你能在小提琴中演示吗？下面是示例。虽然对于文本包装，我必须在“和”后面加上带有字段集和图例的br标记。control-label“谢谢，这让我达到了95%的效果。”。

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;
}

*display:inline;
*float:none;

<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>

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