什麼CSS樣式我可以用它來改變我的單選按鈕

Question

位置我怎樣才能降低單選按鈕是相同的高度，男性和女性？我試過寬度或高度都沒有工作我甚至嘗試填充，它沒有工作。

Answer 1

---

試試這個：順便說一下

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

你的父母DIV需要有高度設置。

Answer 2

這個小例子，對我的作品開箱：

<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 3

試試這個CSS：

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

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

Answer 4

input{ 
 
    
 
    vertical-align:bottom; 
 
    }

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

希望這有助於。