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> 

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

봅니다이 사용하기 :

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 3

이 당신이 당신의 라디오 될 버튼 또는 뭔가 다른

내용 .login 라디오 입력 { vertical-align:top;margin-top:1px;

}

정확히 위치를 원하는 것입니다인가

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

Answer 4

3 단계 :

• 브라우저는 기본적으로 <input>에 적용되는 기본 margin 및 padding를 제거합니다.
• <label>에 텍스트 줄 바꿈을하십시오.
• <input> 및 <label>에 vertical-align: middle을 적용하십시오.

작업 코드 조각 :

.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 입력의 수직 정렬입니다.