Question

我有一个div，而div里面有单选按钮，最简单的方法是根据文本在div内的同一行垂直对齐单选按钮

echo"<div  id=\"div{$id}\" ";?> 
                    echo"</br>

                    <input type= radio name=\"{$id}\" value=\"{$option1}\" >
                    $option1
                    </br>

                    <input type= radio name=\"{$id}\" value=\"{$option2}\">
                     $option2
                    </br>

                    <input type= radio name=\"{$id}\" value=\"{$option3}\">
                    $option3
                    </br>

                    <input type= radio name=\"{$id}\" value=\"{$option4}\">
                     $option4

                    </br></br>";
                    echo"</div>";

以上代码值取自db，我想知道如何在div中垂直对齐div中的radiobuttons ......提前谢谢

Answer 1

样式单选按钮如下：

input[type="radio"] {
    margin-top: 0;
    vertical-align: middle;
}

Answer 2

您可以使用表格尝试：

echo"<div  id=\"div{$id}\" ";?> 

echo"<br />
<table>
<tr>
<td>
<input type= radio name=\"{$id}\" value=\"{$option1}\" >
</td>
<td>
$option1
</td>
</tr>


<tr>
<td>
<input type= radio name=\"{$id}\" value=\"{$option2}\" >
</td>
<td>
$option2
</td>
</tr>

<tr>
<td>
<input type= radio name=\"{$id}\" value=\"{$option3}\" >
</td>
<td>
$option3
</td>
</tr>

<tr>
<td>
<input type= radio name=\"{$id}\" value=\"{$option4}\" >
</td>
<td>
$option4
</td>
</tr>

</table>
</br></br>";

echo"</div>";

Answer 3

你必须把它们放在桌子上才能正确对齐......

echo"<div  id=\"div{$id}\" ";?> 
                echo"</br>
<table><tr>
                <td align=cente valign=middle><input type= radio name=\"{$id}\" value=\"{$option1}\" ></td><td align=center valign=middle>
                $option1</td></tr>

                <td align=cente valign=middle><input type= radio name=\"{$id}\" value=\"{$option2}\"></td></td><td align=center valign=middle>
                 $option2</td></tr>
                </br>

                <td align=cente valign=middle><input type= radio name=\"{$id}\" value=\"{$option3}\"></td><td align=center valign=middle>
                $option3</td></tr>
                </br>

                <td align=cente valign=middle><input type= radio name=\"{$id}\" value=\"{$option4}\"></td><td align=center valign=middle>
                 $option4</td></tr>

“; 回声 “”;

对齐div内的单选按钮

3 个答案: