1

Bootstrapを使用して基準フォームを作成しています。fieldset一部のフォーム フィールドには、チェックボックスまたはラジオ オプションが含まれているため、アテンダントlegendを採用して、オプションをカテゴリに関連付けたいと思います。

以前にこれを聞いたことがある場合は止めてください。しかし、IE7 のフォームのスタイル設定に問題があります。具体的には：

  1. はlegend改行が発生するようですので、
  2. ラジオ ボタン (またはチェックボックス) を右側の列に "とどめる" ことができないようです。

この画像は、最初の行 (赤いボックス) の「悪い」レイアウトと、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>

Bootstrap に付属するものを補完するために、これらの CSS ルールを追加しました (ただし、うまくいきません)。

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