CSS-如何对齐单选按钮？

debugcn 发表于 Dev

越前越前

这是我的HTML表单代码：

<div id="myForm">
        <form action="<?php echo $__SERVER["PHP_SELF"];?>" method="post">
            <table>
                <input type="radio" name="tableNames" value="<?php echo $tempName; ?>" > <?php echo $tempName ?> <br/>

                <tr> 
                    <td><input type="submit" value="submit"></td>
                    <td><input type="reset" value="reset"></td>
                </tr>
            </table>
        </form>
    </div>

这是我目前的CSS：

#myForm {
    margin: auto;
    width: 700px;
}
#myForm form {
    background-color: #E0E0E0;
    text-align: center;
    padding: 5px;
}
#myForm table {
    margin: auto;
    width: 60%;
    padding: 15px;
}

这是我的表单现在的样子：如何对齐单选按钮的按钮

Nitsan Baleli

您可以将输入内容包装在一个div中，然后将该div居中并使其左对齐。

#myForm {
  margin: auto;
  width: 700px;
}
#myForm form {
  background-color: #E0E0E0;
  text-align: center;
  padding: 5px;
}
#myForm table {
  margin: auto;
  width: 60%;
  padding: 15px;
}
.test {
  width: 300px;
  margin: 0 auto;
  text-align: left;
}

<div id="myForm">
  <form method="post">
    <table>
      <div class="test">
        <input type="radio" name="tableNames" value="asdasd123123">asdasdasd
        <br/>
        <input type="radio" name="tableNames" value="asd">asdasdasd
        <br/>

        <input type="radio" name="tableNames" value="asdasdasdas?>">123
        <br/>
        <input type="radio" name="tableNames" value="123123123123">asdasdasd1231231231231231231231
        <br/>
      </div>
      <tr>
        <td>
          <input type="submit" value="submit">
        </td>
        <td>
          <input type="reset" value="reset">
        </td>
      </tr>
    </table>
  </form>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。