Question

如何水平对齐单选按钮列表？这是一个捕捉性别价值的男女。我想保持名称输入CSS不变。这是html：

<label for="temp">Gender</label>

<label for="one">Male</label>
<input type="radio" id="one" name="first_item" value="1" />

<label for="two">Female</label>
<input type="radio" id="one" name="first_item" value="2" />

css：

.grid-container {
    display: grid;
    grid-column-gap: 5px;
    grid-template-columns: auto auto;
    background-color: #2196f3;
    padding: 10px;
}

.left-griditem {
}

input,
label {
    display: block;
}

这里是codepen。当前按钮处于垂直位置。

Answer 1

如果只需要单选按钮，请添加以下样式：

#genderArea input, #genderArea label{
    display: inline;
}

并使用以下HTML：

<div class="grid-container">
    <div class="left-griditem">
        <label for="name">Name</label>
        <input id="name" type="text" name="name">

        <label for="temp">Gender</label>

        <span id="genderArea">
        <label for="one">Male</label>
        <input type="radio" id="one" name="first_item" value="1" />
            <br>
        <label for="two">Female</label>
        <input type="radio" id="one" name="first_item" value="2" />
        </span>

    </div>
    <div class="right-griditem">2</div>
</div>

Answer 2

使用表，tr和td标签尝试这个简单的代码

<table>
  <tr>
    <td>
      <label for="one">Male</label>
    </td>
    <td>
      <input type="radio" id="one" name="first_item" value="1" />
    </td>
    <td style="widht:20px;"></td>
    <td>
      <label for="two">Female</label>
    </td>
    <td>
      <input type="radio" id="one" name="first_item" value="2" />
    </td>
  </tr>
</table>

这种方法使您可以灵活地以所需方式放置控件

Answer 3

您必须在div /标签下包装要创建的特定行。

.grid-container {
  display: grid;
  grid-column-gap: 5px;
  grid-template-columns: auto auto;
  background-color: #2196f3;
  padding: 10px;
}

.left-griditem {}

input,
label {
  display: inline-block;
}

div.item>label:first-child {
  width: 70px;
  font-weight: bold;
}

div.item:first-child>input,
div.item:first-child>label {
  display: block
}

body {
  background: hsl(221, 64%, 24%);
  color: hsl(235, 9%, 39%);
  font-family: "Open Sans", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  margin: 2rem 1rem 1rem 1rem;
}

div {
  background: #fff;
  padding: 1vw 2vw;
}

<div class="grid-container">
  <div class="left-griditem">
    <div class="item">
      <label for="name">Name</label>
      <input id="name" type="text" name="name">
    </div>
    <div class="item">
      <label for="temp">Gender</label>
      <label for="one">Male</label>
      <input type="radio" id="one" name="first_item" value="1" />
      <label for="two">Female</label>
      <input type="radio" id="two" name="first_item" value="2" />
    </div>

  </div>
  <div class="right-griditem">2</div>
</div>

Answer 4

更改此：

input,
label {
    display: block;
}

对此：

input,
label {
    display: inline;
}

CSS：如何水平显示单选按钮列表？

4 个答案: