1

我正在使用Bootstrap构建标准表单。一些表单字段包括复选框或单选选项，因此我想雇用fieldset和服务员legend将选项与其类别相关联。

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

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

这张图片展示了第一行的“坏”布局（红色框内），以及我试图在第二行上实现的布局（绿色框内）。

<code>legend</code> 似乎导致换行，所以我似乎无法让单选按钮（或复选框）

让我们转到 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 中看起来不错。

4

1 回答 1

4

既然你试过

*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;
}
于 2013-04-01T16:05:18.030 回答