Question

我已经完成浮动和内联但不起作用。希望你们帮助我。它就像这样

<form action="#">
<input type="radio" class="inline" name="pay" value="visa"><img src="pic1.gif">
<input type="radio" class="inline" name="pay" value="master"><img src="pic2.gif">
<input type="radio" class="inline" name="pay" value="paypal"><img src="pic3.jpg">
</form>

* * *

the output goes like this:
         ---------
         '  pic  '
         '-------'


     *radio

i want it to be like this:
             ---------
      *radio '  pic  '
             '-------'

CSS：

.inline {
    display: inline-block;
}

Answer 1

定义 input radio和img标记此css

    .inline,.inline + img{
     display:inline-block;
   vertical-align:middle
    }

<强> Demo

Answer 2

使用vertical-align:middle; float:left;

Answer 3

将vertical-align:middle用于img代码

<强> HTML

<form action="#">
    <input type="radio" class="inline" name="pay" value="visa"><img src="http://www.m8betting.com/M8betting/Upload/3746/thumbs/image_placeholder8.gif">
    <input type="radio" class="inline" name="pay" value="master"><img src="http://www.m8betting.com/M8betting/Upload/3746/thumbs/image_placeholder8.gif">
    <input type="radio" class="inline" name="pay" value="paypal"><img src="http://www.m8betting.com/M8betting/Upload/3746/thumbs/image_placeholder8.gif">
</form>

<强> CSS

img{
    vertical-align:middle;
}

Fiddle Sample

如何将pic与单选按钮的同一行对齐？

3 个答案: