对齐 HTML 中 radio/checkbox 旁边的文本

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 个步骤即可解决您的问题：

移除浏览器默认应用于<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

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

对齐 HTML 中 radio/checkbox 旁边的文本

Aligning text beside a radio/checkbox in HTML

html

css

radio