HTML 表单单选按钮定位

Question

我的问题很基本。 它关于我的单选按钮的位置按钮略低于其相邻的文本。 如何将其准确定位在其文本前面单击注册表单的链接，因为它提供了我的问题注册表单的图像

Answer 1

看到此表格，单选按钮正好在文本之前

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>






    <form >


    <label>Name</label>

    <input type="text">
    <br>

    <label>Email</label>


    <input type="email" name="">

    <br>
    <label>Date</label>

    <input type="date" name="">

    <br>

    <label>Password</label>

    <input type="password" name="">

    <br>

    <label>Color</label>

    <input type="color" name="">

    <br>
    <label>Select Any One</label>
    <input type="checkbox" name="">Travel
    <input type="checkbox" name="">Food

    <input type="checkbox" name="">Hotel


    <br>

    <label>Select Gender</label>
    <input type="radio" name="gender">Male
    <input type="radio" name="gender">FeMale



    <br>
    <select>
        <option>Select Box</option>
    </select>

    <br>


    <textarea rows="4" cols="50"></textarea>














    </form>













    </body>
    </html>

Answer 2

单选按钮不仅仅位于“ Male和“ Female标签的前面，因为您已将CSS中每个元素的宽度设置为100%

*{
    margin:0px auto;
    width:100%;        <------ This is what's causing the problem
 }

只需去除width: 100%解决您的问题

*{
     margin:0px auto;
 }

在此处测试单击此处查看更改

或者，您可以只使用position属性定位它们。

在style标签中添加以下课程

<!-- CSS -->

#form form input[type="radio"]{
  position:relative;
  top: -19px;
}

在此处进行测试单击此处查看更改

Answer 3

从以下代码中删除width:100%解决了jsfiddle中的问题

*{
margin:0px auto;

}

这是因为该样式适用于所有放置了文本和单选按钮的元素

HTML 表单单选按钮定位

问题描述

2 个解决方案

解决方案1
2 已采纳 2017-02-06 20:49:19

解决方案2
0 2017-02-06 20:52:48

解决方案3
0 2017-02-06 20:55:16

HTML 表单单选按钮定位

问题描述

2 个解决方案

解决方案1 2 已采纳 2017-02-06 20:49:19

解决方案2 0 2017-02-06 20:52:48

解决方案3 0 2017-02-06 20:55:16

解决方案1
2 已采纳 2017-02-06 20:49:19

解决方案2
0 2017-02-06 20:52:48

解决方案3
0 2017-02-06 20:55:16