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

这是你想要的单选按钮的位置还是其他东西

.login-radio input {     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;
}

这里是fiddle。

问候，米兰。

Answer 4

将解决问题的3个步骤：

• 默认情况下，删除浏览器应用于margin的默认padding和<input>。
• 将文字换入<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

FIDDLE HERE

<强> 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输入的垂直对齐方式。