id内のラベルの大きさを変更することはできますか

Question

    <dt>性別</dt>
    <s:iterator value="genderList" status="st">
      <dd>
        <div class="genInput">
          <label for="gender<s:property value='value'/>">
            <s:property value='label'/>
          </label>
            <s:checkboxlist id="gender" list="top" listKey="value" listValue="label" name="gender" theme="search"/>
        </div>
      </dd>
    </s:iterator>
  </dl>

上記のようなソースで性別リストを作り、クリックしたときに検索処理に行く機能を作成しています。
実際のHTMLソースは以下のようになります。

                <dt>性別</dt>                
                  <dd>
                    <div class="genderInput">
                      <label for="gender1">
                        男
                      </label>                        
<input type="checkbox" name="gender" value="1" id="gender1"/>
                    </div>
                  </dd>
                  <dd>
                    <div class="genderInput">
                      <label for="2">
                        女
                      </label>
<input type="checkbox" name="gender" value="2" id="gender2"/>
                    </div>
                  </dd>

この場合だとラベルが「男」「女」のみになってしまい、クリック可能範囲が狭く押しにくいです。
なのでラベルを横に広げたいと思っているのですが、divの中のラベルは大きさを変えることができるのでしょうか。<label for=~ ~ style="width:40px;">のような形にしたいです。。
現在、genderInputのところがちょうどいい大きさでここをラベルとしたいのですが、
それだと上手く機能しませんでした。。

乱文になってしまいましたが、何かアドバイスなどありましたらお願いします。

Answer 1

labelをブロック要素に変えるのはいかがでしょうか。

              <dd>
                <div class="genderInput">
                  <label for="gender1" style="display:block;float:left;width:80px;">
                    男
                  </label>
                  <input type="checkbox" name="gender" value="1" id="gender1" style="display:block;float:left;"/>
                </div>
              </dd>
              <dd>
                <div class="genderInput" style="clear:both;">
                  <label for="gender2" style="display:block;float:left;width:80px;">
                    女
                  </label>
                  <input type="checkbox" name="gender" value="2" id="gender2" style="display:block;float:left;"/>
                </div>
              </dd>

Comments

[yadrop]

思っていた通りのことが出来ました！
なるほど。スタイルの幅だけでなく要素も設定すればよかったのですね。
ありがとうございます！