Question

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

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标签的正前方，因为您已在100%

中将每个元素的宽度设置为CSS

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

只需删除width: 100%即可解决您的问题

*{
     margin:0px auto;
 }

在此测试 Click Here to see the change

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

在style标记

中添加以下课程

<!-- CSS -->

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

在此测试 Click here to see the change

Answer 3

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

中的问题

*{
margin:0px auto;

}

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

HTML表单单选按钮定位

3 个答案: