css: как отобразить список радиокнопок по горизонтали?

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;
}

Вот кодекс . В настоящее время кнопки находятся в вертикальном положении.

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

Попробуйте этот простой код, используя теги table, 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 / a.

.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;
}