我可以使用什么CSS样式来更改单选按钮的位置

Question

如何将单选按钮降低到与男性和女性相同的高度？我试过宽度或高度都没有用，我甚至尝试过填充，但它没有用。

Answer 1

这个最小的例子适合我开箱即用：

<form>
  <span>Gender</span>
    <fieldset style="display:inline; border:0;">
    <label><input type="radio"/> Female</label>
    <label><input type="radio"/> Male</label>
  </fieldset>
</form>

Answer 2

试试这个：

input[type="radio"] {
  margin-top: -1px;
  vertical-align: middle;
}

您的父级div需要设置高度。

Answer 3

试试这个css：

＆＃13;

＆＃13;

    .maxl{
      margin:25px ;
    }
    .inline{
      display: inline-block;
    }
    .inline + .inline{
      margin-left:10px;
    }
    .radio{
      color:#999;
      font-size:15px;
      position:relative;
    }
    .radio span{
      position:relative;
       padding-left:20px;
    }
    .radio span:after{
      content:'';
      width:15px;
      height:15px;
      border:3px solid;
      position:absolute;
      left:0;
      top:1px;
      border-radius:100%;
      -ms-border-radius:100%;
      -moz-border-radius:100%;
      -webkit-border-radius:100%;
      box-sizing:border-box;
      -ms-box-sizing:border-box;
      -moz-box-sizing:border-box;
      -webkit-box-sizing:border-box;
    }
    .radio input[type="radio"]{
       cursor: pointer; 
      position:absolute;
      width:100%;
      height:100%;
      z-index: 1;
      opacity: 0;
      filter: alpha(opacity=0);
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
    }
    .radio input[type="radio"]:checked + span{
      color:#0B8;  
    }
    .radio input[type="radio"]:checked + span:before{
        content:'';
      width:5px;
      height:5px;
      position:absolute;
      background:#0B8;
      left:5px;
      top:6px;
      border-radius:100%;
      -ms-border-radius:100%;
      -moz-border-radius:100%;
      -webkit-border-radius:100%;
    }

＆＃13;

<div class="maxl">
  <label class="radio inline"> 
      <input type="radio" name="sex" value="male" checked>
      <span> Male </span> 
   </label>
  <label class="radio inline"> 
      <input type="radio" name="sex" value="female">
      <span>Female </span> 
  </label>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

＆＃13;

＆＃13;

<form>
  <span>Gender</span>
    <label><input type="radio" name="select_gender"/> Male</label>
    <label><input type="radio" name="select_gender"/> Female</label>
</form>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

希望这有帮助。