CSS3 스타일 체크 박스 - 체크 박스의 오른쪽에 라벨 텍스트를 들여 쓰기/왼쪽 정렬하려고 시도합니다.

Question

fontAwesome을 사용하여 CSS3 스타일 체크 박스가 있습니다. 내가 겪고있는 작은 포맷팅 문제는 텍스트 줄 바꿈이 체크 박스 아래에 있다는 것입니다.

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>에 둘러싸여 CSS에서 .wrapper
• 의 CSS를 변경에서
• 는

는 .text 추가 그리고 그게 다야.