jak wyłączyć oblewanie tekstem w okolicach pola wyboru

Question

jak mogę zapobiec zawijaniu tekstu wokół pola wyboru? Muszę wyrównać tekst po polu wyboru, a nie pod nim. Wiem, że nie jestem pierwszą osobą, o którą pytam, ale nie mogę znaleźć rozwiązania.

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

Spróbuj zmienić:

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