单选按钮位置CSS

Question

我正尝试为单选按钮设置样式，以选择性别，如下图所示：

.radio {
  margin: 0.1rem;
  margin-left: 2.5rem;
  margin-top:
}

.radio input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.radio input[type="radio"]+.radio-label:before {
  content: '';
  background: #f4f4f4;
  border-radius: 100%;
  border: 1px solid #b4b4b4;
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  position: relative;
  /* position */
  top: -3.4em;
  margin-right: 1em;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  transition: all 250ms ease;
}

.radio input[type="radio"]:checked+.radio-label:before {
  background-color: #3197EE;
  box-shadow: inset 0 0 0 4px #f4f4f4;
}

.radio input[type="radio"]:focus+.radio-label:before {
  outline: none;
  border-color: #3197EE;
}

.radio input[type="radio"]:disabled+.radio-label:before {
  box-shadow: inset 0 0 0 4px #f4f4f4;
  border-color: #b4b4b4;
  background: #b4b4b4;
}

.radio input[type="radio"]+.radio-label:empty:before {
  margin-right: 0;
}

<div class="form-group">
  <p>Sex <span>*</span></p>
  <span class="icon-case"><i class="fas fa-venus-mars"></i></span>
  <input type="text" name="sex" id="ville" data-rule="required" data-msg="Vérifiez votre saisie sur les champs : Le champ 'Ville' doit être renseigné." />
  <div class="validation"></div>
  <div class="radio">
    <input id="radio-1" name="radio" type="radio" checked>
    <label for="radio-1" class="radio-label">Male</label>
  </div>

  <div class="radio">
    <input id="radio-2" name="radio" type="radio">
    <label for="radio-2" class="radio-label">Female</label>
  </div>
</div>

我希望“男性”和“女性”标签位于相应按钮旁边的正确位置，但是在标签标签上添加ID不允许我这样做。

编辑

Answer 1

尝试了一些交换。我知道了：

.radio {
  margin: 0.1rem;
  margin-left: 2.5rem;
  margin-top:
}

.radio input[type="radio"] {
  position: relative;
  opacity: 0;
}
.radio input[type="radio"] + .radio-label:before {
  content: '';
  background: #f4f4f4;
  border-radius: 100%;
  border: 1px solid #b4b4b4;
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  position: relative;
  /* position */
  margin-right: 1em;
  margin-top: -2px;
  vertical-align: middle;
  cursor: pointer;
  text-align: center;
  transition: all 250ms ease;
}
.radio input[type="radio"]:checked + .radio-label:before {
  background-color: #3197EE;
  box-shadow: inset 0 0 0 4px #f4f4f4;
}
.radio input[type="radio"]:focus + .radio-label:before {
  outline: none;
  border-color: #3197EE;
}
.radio input[type="radio"]:disabled + .radio-label:before {
  box-shadow: inset 0 0 0 4px #f4f4f4;
  border-color: #b4b4b4;
  background: #b4b4b4;
}
.radio input[type="radio"] + .radio-label:empty:before {
  margin-right: 0;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<div class="form-group">
  <p class="d-inline-block align-top">Sex <span>*</span></p>
  <span class="icon-case"><i class="fas fa-venus-mars"></i></span>
  <div class="d-inline-block">
    <div class="radio">
      <input id="radio-1" name="radio" type="radio" checked />
      <label for="radio-1" class="radio-label">Male</label>
    </div>
    <div class="radio">
      <input id="radio-2" name="radio" type="radio" />
      <label for="radio-2" class="radio-label">Female</label>
    </div>
  </div>
  <div class="validation"></div>
  <input type="text" name="sex" id="ville" data-rule="required" data-msg="Vérifiez votre saisie sur les champs : Le champ 'Ville' doit être renseigné." />
</div>

预览

更改

CSS有一些变化：