0

以下の例は Chrome では機能しますが、FF や IE では機能しません。「オプション 1」と「オプション 2」を垂直方向に中央揃えにしようとしています。誰かが私を正しい方向に押し進めることができますか?

HTML

<div id="polls-4" class="wp-polls">
    <form id="polls_form_4" class="wp-polls-form" action="/sandbox/our-girls/" method="post">
        <p style="display: none;"><input type="hidden" id="poll_4_nonce" name="wp-polls-nonce" value="eeb4f4642f"></p>
        <p style="display: none;"><input type="hidden" name="poll_id" value="4"></p>
        <div id="polls-4-ans" class="wp-polls-ans"><ul class="wp-polls-ul">
        <li><input type="radio" id="poll-answer-13" name="poll_4" value="13"> <label for="poll-answer-13"><img src="http://i.minus.com/iCKua5u7mVHHA.gif">Option 1</label></li>
        <li><input type="radio" id="poll-answer-14" name="poll_4" value="14"> <label for="poll-answer-14"><img src="http://i.minus.com/iCKua5u7mVHHA.gif">Option 2</label></li>
        </ul>
    </form>
</div>

CSS

.wp-polls-ul { margin:0 !important }
.wp-polls-ul li { margin-bottom:10px }
.wp-polls-form .wp-polls-ul li input { float:left;height:35px;margin-right:10px }
.wp-polls-form .wp-polls-ul li label { display:block;height:35px;line-height:35px;vertical-align:top }
.wp-polls-form .wp-polls-ul li label img { margin-right:10px }

例: http://jsfiddle.net/tePwt/

4

3 に答える 3

0

@Passerby によって送信されたものは、Firefox 用の箇条書きを生成します。これを少し変更して試してください。[http://jsfiddle.net/tePwt/5/]

于 2013-01-11T05:40:05.940 に答える
0

コメントからの拡張:

追加

vertical-align:middle

imgJSFiddle デモ

于 2013-01-11T06:57:00.093 に答える
0

@John はこの jsfiddle.net/tePwt/7/ を使用します。

于 2013-01-11T06:11:25.193 に答える