如何擺脫單選按鈕的垂直邊距？

我在單選按鈕之間有大約30px的垂直空間。設置爲margin-top和margin-bottom至0px沒有效果。我怎樣才能消除垂直空間？如何擺脫單選按鈕的垂直邊距？

body { 
 
    margin: 2em; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
} 
 

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

 
input[type="radio"]+label { 
 
    cursor: pointer; 
 
    border: 1px solid #ccc; 
 
    background: #efefef; 
 
    color: #aaa; 
 
    border-radius: 3px; 
 
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0); 
 
    display: block; 
 
    width: 200px; 
 
    height: 40px; 
 
    padding-left: 20px; 
 
    margin-top: 0px; 
 
    margin-bottom: 0px; 
 
} 
 

 
input[type="radio"]:checked+label { 
 
    background: #777; 
 
    border: 1px solid #444; 
 
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4); 
 
    color: white; 
 
    margin-top: 0px; 
 
    margin-bottom: 0px; 
 
}

<input id="Radio1" name="Radios" type="radio"> 
 
<label for="Radio1">I am option1</label> 
 
<input id="Radio2" name="Radios" type="radio" value="Option 2"> 
 
<label for="Radio2">I am option2</label> 
 
<input id="Radio3" name="Radios" type="radio" value="Option 3"> 
 
<label for="Radio3">I am option3</label>

View on JSFiddle

來源

2017-10-20 0x4f3759df

從流（absloute）刪除它 https://jsfiddle.net/0d227oj6/1/

body { 
 
    margin: 2em; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
} 
 

 
input[type="radio"] { 
 
    opacity: 0; 
 
    position:absolute;/* removed from the flow */ 
 
} 
 

 
input[type="radio"]+label { 
 
    cursor: pointer; 
 
    border: 1px solid #ccc; 
 
    background: #efefef; 
 
    color: #aaa; 
 
    border-radius: 3px; 
 
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0); 
 
    display: block; 
 
    width: 200px; 
 
    height: 40px; 
 
    padding-left: 20px; 
 
    margin-top: 0px; 
 
    margin-bottom: 0px; 
 
} 
 

 
input[type="radio"]:checked+label { 
 
    background: #777; 
 
    border: 1px solid #444; 
 
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4); 
 
    color: white; 
 
    margin-top: 0px; 
 
    margin-bottom: 0px; 
 
}

<input id="Radio1" name="Radios" type="radio"> 
 
<label for="Radio1">I am option1</label> 
 
<input id="Radio2" name="Radios" type="radio" value="Option 2"> 
 
<label for="Radio2">I am option2</label> 
 
<input id="Radio3" name="Radios" type="radio" value="Option 3"> 
 
<label for="Radio3">I am option3</label>

來源

2017-10-20 16:24:35

如果你的目的是爲了隱藏單選按鈕本身，只是有明顯的標籤，那麼就應用position: absolute從頁面流刪除：

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

https://jsfiddle.net/99b6pbz7/

來源

2017-10-20 16:23:34 delinear

只是隱藏實際的單選按鈕。

input[type="radio"] { 
    display: none; 
}

來源

2017-10-20 16:32:56 TinMonkey

如何擺脫單選按鈕的垂直邊距？

回答

相關問題