CSS3風格的複選框 - 試圖縮進/左對齊複選框右側的標籤文本

Question

我有CSS3風格的複選框使用fontAwesome。我遇到的一個小格式問題是文本換行在複選框下面。下面是代碼和小提琴：

CSS：

@import url(//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css); 

.wrapper { 
    width:300px; 
} 
input[type=checkbox].with-font { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
} 
input[type=checkbox].with-font ~ label:before { 
    font-family: FontAwesome; 
    display: inline-block; 
    content: "\f1db"; 
    letter-spacing: 10px; 
    font-size: 1.2em; 
    color: #535353; 
    width: 1.4em; 
} 
input[type=checkbox].with-font:checked ~ label:before { 
    content: "\f00c"; 
    font-size: 1.2em; 
    color: darkgreen; 
    letter-spacing: 5px; 
} 
input[type=checkbox].with-font ~ label:before {   
    content: "\f096"; 
} 
input[type=checkbox].with-font:checked ~ label:before { 
    content: "\f046";   
    color: darkgreen; 
} 

HTML：

<div class="wrapper"> 
    <input id="box1" type="checkbox" class="with-font" /> 
    <label for="box1">This is very long text that will wrap underneath the checkbox. Not sure how to flush it properly.</label> 
</div> 

JS Fiddle

理想情況下，我想縮進和對齊文本，像這樣：

我已經嘗試了幾種方法，比如在表格和左浮動div中進行包裝，但是當我嘗試從複選框中分離標籤時，它似乎會破壞CSS。任何方向都非常感謝！

Answer 1

那樣？ ;）

HTML：

<div class="wrapper"> 
    <input id="box1" type="checkbox" class="with-font" /> 
    <label for="box1"> 
    <span class=text> 
     This is very long text that will wrap underneath the checkbox.  Not sure how to flush it properly. 
    </span> 
    </label> 
</div> 

CSS：

@import url(//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css); 
    .wrapper { 
     width: 300px; 
     text-align: justify; 
     text-justify: inter-word; 
    } 

    input[type=checkbox].with-font { 
     border: 0; 
     clip: rect(0 0 0 0); 
     height: 1px; 
     margin: -1px; 
     overflow: hidden; 
     padding: 0; 
     position: absolute; 
     width: 1px; 
    } 

    input[type=checkbox].with-font ~ label:before { 
     font-family: FontAwesome; 
     display: inline-block; 
     content: "\f1db"; 
     letter-spacing: 10px; 
     font-size: 1.2em; 
     color: #535353; 
     width: 1.4em; 
    } 

    input[type=checkbox].with-font:checked ~ label:before { 
     content: "\f00c"; 
     font-size: 1.2em; 
     color: darkgreen; 
     letter-spacing: 5px; 
    } 

    input[type=checkbox].with-font ~ label:before { 
     content: "\f096"; 
    } 

    input[type=checkbox].with-font:checked ~ label:before { 
     content: "\f046"; 
     color: darkgreen; 
    } 

    .text { 
     margin-left: 10px; 
     position: absolute; 
     width: 250px; 
    } 

https://jsfiddle.net/0vpcwo53/

更新日誌：

• 在HTML This is very ...現在由<span class=text></span>包圍
• 在.wrapper
• CSS改變在CSS中添加的.text

而這一切。