如何禁用文字環繞四周複選框

我怎麼能防止文本圍繞複選框包裝？我需要對齊複選框後面的文本，而不是它。我知道我不是第一個要問的人，但我似乎找不到解決辦法。如何禁用文字環繞四周複選框

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

來源

2013-02-18 devotchkah

http://jsfiddle.net/csYPu/77/複選框下方的空間應該是空的，在這種情況下，在第二行字「阿梅特」將啓動權「排版」下 – devotchkah 2013-02-18 18:02:15

嘗試改變：

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

來源

2013-02-18 17:47:50 Mate

它打破布局。我需要整個塊有一個特定的寬度 – devotchkah 2013-02-18 17:53:37

@devotchkah更新！（測試IE，FF，Ch）我希望它會有幫助 – Mate 2013-02-18 18:24:50

謝謝，馬特：}它現在的作品 – devotchkah 2013-02-18 18:33:01

如何禁用文字環繞四周複選框

回答

相關問題