Question

我试图在我的页面上对齐按钮无线电，似乎其中一个按钮（性别）高度缩进。 M（性别）的收音机位于中心，另一个按钮位于最右侧。我一直在改变css中的值，但它没有对齐。我如何对齐它们？有人帮吗？我的CSS已合并，我从SO获得了大部分帮助。

＆＃13;

form {
  width: 80%;
  margin: 0 auto;
}
label,
input {
  display: inline-block;
}
label {
  width: 30%;
}
label + input {
  width: 30%;
  margin: 0 10% 0 1%;
}
.label-align input[type="checkbox"] {
  cursor: pointer;
  margin-top: 6px;
}
.label-align span {
  margin: 0 0 10px 10px;
  display: block;
}
.left {
  float: left;
}

＆＃13;

<div id="register" class="container">
  <form action="" method="post">
    <label>*First Name:</label>
    <input type="text">
    <br>
    <label>*Last Name:</label>
    <input type="text">
    <br>
    <label>*Birth Date:</label>
    <input type="text">
    <br>
    <label>*Gender:</label>
    <input type="radio" name="gender" value="male" checked>M
    <input type="radio" name="gender" value="female" checked>F
    <br>
    <label>*Email:</label>
    <input type="text">
    <br>
    <label>*Password:</label>
    <input type="text">
    <br>
    <label>*Re-enter Password:</label>
    <input type="text">
    <br>
    <button class="button" type="submit" value="Submit" onclick="" style="vertical-align:middle"><span>Submit</span>
    </button>
  </form>
</div>

＆＃13;

Answer 1

这是因为以下风格。

label + input {
  width: 30%;
  margin: 0 10% 0 1%;
}

标签后面的所有输入都将获得30％的宽度。只有第一个单选按钮受此影响的原因是因为它是与性别标签相邻的那个。

您可以更改此规则，以便它仅影响输入框。

label + input[type='text'] {
  width: 30%;
  margin: 0 10% 0 1%;
}

代码段示例

＆＃13;

form {
  width: 80%;
  margin: 0 auto;
}
label,
input {
  display: inline-block;
}
label {
  width: 30%;
}
label + input[type='text'] {
  width: 30%;
  margin: 0 10% 0 1%;
}
.label-align input[type="checkbox"] {
  cursor: pointer;
  margin-top: 6px;
}
.label-align span {
  margin: 0 0 10px 10px;
  display: block;
}
.left {
  float: left;
}

＆＃13;

<div id="register" class="container">
  <form action="" method="post">
    <label>*First Name:</label>
    <input type="text">
    <br>
    <label>*Last Name:</label>
    <input type="text">
    <br>
    <label>*Birth Date:</label>
    <input type="text">
    <br>
    <label>*Gender:</label>
    <input type="radio" name="gender" value="male" checked>M
    <input type="radio" name="gender" value="female" checked>F
    <br>
    <label>*Email:</label>
    <input type="text">
    <br>
    <label>*Password:</label>
    <input type="text">
    <br>
    <label>*Re-enter Password:</label>
    <input type="text">
    <br>
    <button class="button" type="submit" value="Submit" onclick="" style="vertical-align:middle"><span>Submit</span>
    </button>
  </form>
</div>

＆＃13;

Answer 2

label + input {
  width: 30%;
  margin: 0 10% 0 1%;
}

删除宽度：30％;

Answer 3

请添加以下css，

input[type="radio"] {
    margin: 4px 4px 4px 4px;
    width: 2%;
}

Answer 4

在你的代码中添加一个这样的类

        <input type="radio" name="gender" class="gender" value="male" checked>M
        <input type="radio" name="gender" value="female" checked>F<br>

在您的css样式属性中

添加此类性别属性，如下所示。

 .gender{
  width: 0px !important;
  margin: 0px 0px 0px 4px !important;
  }

如何在CSS中对齐按钮无线电

4 个答案: