テキストラップを無効にする方法チェックボックス

Question

テキストがチェックボックスの周りに巻き付かないようにするにはどうすればよいですか？私は、チェックボックスの後のテキストを整列させる必要があります。私は最初に頼む人ではないことを知っていますが、私は解決策を見つけることができません。

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

変更してみてください：

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