làm thế nào để vô hiệu hóa gói văn bản xung quanh hộp kiểm

Question

làm cách nào để ngăn văn bản bị bao quanh hộp kiểm? Tôi cần căn chỉnh văn bản sau hộp kiểm, chứ không phải dưới nó. Tôi biết tôi không phải là người đầu tiên hỏi, nhưng tôi không thể tìm ra giải pháp.

http://jsfiddle.net/csYPu/77/

.sign-newsletter { 
padding:40px; 
width:200px; 
} 

form li {display:inline;} 

fieldset {border:0;} 

.checkbox { 
width: 13px; 
height: 13px; 
padding: 0; 
margin:0 10px 0 0; 
vertical-align: bottom; 
position: relative; 
top: -2px; 
*overflow: hidden; 
} 

input {background:#636566; padding:7px; 
width:100%; 
margin-bottom:5px; 
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
-moz-box-sizing: border-box; /* Firefox, other Gecko */ 
box-sizing: border-box;   /* Opera/IE 8+ */ 
} 

<div class="sign-newsletter"> 

<form method="post" action="submit-sign-newsletter.php"> 
    <fieldset> 

     <ul> 
      <li><input type="text" name="name" placeholder="Name" /></li> 
      <li><input type="email" name="email" placeholder="Email" /></li> 
      <li><input class="checkbox" type="checkbox" name="sign_me_in" value="" /><label>"Lorem ipsum dolor sit amet, consectetur  </label></li> 
      <li><input type="submit" value="Submit" class="button" /></li> 
     </ul> 

    </fieldset> 
</form> 

</div> 

Answer 1

Hãy thử thay đổi:

HTML

<li> 
    <div class="chkLabel"> 
     <input class="checkbox" type="checkbox" name="sign_me_in" value="" /> 
     <label>"Lorem ipsum dolor sit amet, consectetur</label> 
    </div> 
</li> 

CSS

.chkLabel input { float: left; margin-top:0.5em;} 
.chkLabel label { display: block; margin-left: 1.5em;} 

DEMO