在 HTML 中的單選框/復選框旁邊對齊文本

Question

從頂部到“ Keep me logged in文本有一些填充。

如何刪除填充並使其看起來像這樣？

HTML：

<div class="login-radio">
<input type="radio">Keep me logged in
</div>

CSS：

.login-radio {  
font-size: 12px;
position: fixed;
left:60%;
top: 7%;
color: white;
font-family: arial;   
}

Answer 1

嘗試使用這個：

HTML

<div class="login-radio radio">
       <input type="radio" class="radio">
       <label>Keep me logged in </label>
</div>

CSS

.login-radio, .login-checkbox, .radio, .checkbox {
    display: block;
    min-height: 20px;
    margin-top: 10px;
    margin-bottom: 0px;
    padding: 0px;
    margin-left: -20px;
}

input[type=checkbox] {
    box-sizing: border-box;
    margin: 4px 0 0;
    line-height: normal;
}

.radio label, .checkbox label {
    display: inline;
    cursor: pointer;
}

Answer 2

這就是您想要的單選按鈕的 position 或其他

.login-radio 輸入 { vertical-align:top;margin-top:1px;

}

http://jsfiddle.net/we9x6k3j/1/

Answer 3

嘗試這個：

HTML：

<div>

  <div class="email">
     <input type="email" />
  </div>

  <div class="checkbox">
      <input type="checkbox" />
      <span>Keep me logged in</span>
  </div>

</div>

CSS：

.email input {
float: left;
margin-top: 5px;
margin-left: 5px;
font-family: arial, sans-serif;
font-size: 12px;
outline: none;
}

.checkbox input {
float: left;
margin-top: 10px;
margin-left: 5px;                                      
color: #000;
clear: both;
}

.checkbox span {
float: left;
margin-top: 7px;
margin-left: 2px;
font-family: arial, sans-serif;
}

這是小提琴。

問候，米蘭。

Answer 4

3個步驟將解決您的問題：

• 刪除瀏覽器默認應用於<input>的默認margin和padding 。
• 將文本包裝在<label>中。
• 將vertical-align: middle應用於<input>和<label> 。

工作代碼片段：

 .login-radio { font-size: 12px; position: fixed; left:60%; top: 7%; color: black; font-family: arial; } input{ margin: 0px; padding: 0px; } input, label{ vertical-align: middle; }

 <div class="login-radio"> <input type="radio"> <label>Keep me logged in</label> < -- wrap the text in a label --> </div>

Answer 5

在這里提琴

CSS：

.login{
    width: 200px;
    height:80px;
    background-color: brown;
    color: white;
}

.loginInput{
    margin-left: 3%; 
    margin-top: 1%;
}

.loginRadio input{
    margin-left: 3%;
    vertical-align: top;
}

關鍵變化是loginRadio輸入的垂直alignment。