Question

我正在尝试在代码中共存以下样式，以将它们应用于单选按钮，但是我无法使它们同时工作。

这与display:flex;和vertical-align: baseline;一起使用

这没有：display:flex;但有vertical-align: baseline;

我尝试过使用display:flex; align-items: center;，但是它也不起作用：

显然，我不能在单选按钮上保留2种样式。我尝试使用其他类型的样式，但是它们无法按我的意愿使用。我想使单选按钮的标签和文本与第一张图像在同一行上垂直对齐。你能帮我得到吗？

这是我的代码：

<?php
if ($row["type"] == 0) {

    $ansarray = explode("\n", $row["image_path"]);
    $randomans = [];
    for($i=0; $i<count($ansarray); $i++) {
        $a = array($i+1, $ansarray[$i]);
        array_push($randomans, $a);
    }
    shuffle($randomans);
    for($i=0; $i<count($randomans); $i++) {
        echo "<div style=\"text-align:left; display:flex; vertical-align: baseline;\">";
        echo "<input type=\"radio\" name=\"choice".$row["exercise_id"]."\" value= \"".$randomans[$i][0]."\"  />".$randomans[$i][1]."<br>";
        echo "</div>";
    }

    echo "<input type=\"text\" name=\"choicetext".$row["exercise_id"]."\" value='multi' style=\"display:none;\">";

} else {
    ?>
    <input type="radio" name="choice<?php echo $row["exercise_id"] ?>" value= "0" checked="checked" style="display:none;" />

    <?php
}
?>

这是我所拥有的一个小例子：表格内的单选按钮。

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 40%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;  
}

</style>
</head>

<body>
<table>
  <tr>
    <td><form action="">
    
  <input type="radio" name="gender" value="English"> English is a West Germanic language that was first spoken in early medieval England.<br>
  <input type="radio" name="gender" value="third"> English is the third most-spoken native language in the world, after Standard Chinese and Spanish.<br>
  <input type="radio" name="gender" value="other"> Other
</form></td>  
  </tr>
</table>
</body>
</html>

Answer 1

vertical-align: baseline与flexbox无关。

如果要使用flexbox进行操作，则为div包装器提供以下属性：

display: flex;
align-items: center;

echo "<div style=\"display:flex; align-items: center;\">";

垂直对齐单选按钮和文本

1 个答案: