Facebook과 같은 친구 선택 확인란

Facebook의 "친구 초대"선택과 같은 선택을 코딩하려고합니다. 기본 체크 박스를 사용하고 각 항목의 선택을 시뮬레이션하는 배경이 아니기 때문에 나는 그것을 좋아한다.Facebook과 같은 친구 선택 확인란

문제는 필요한 경우 (텍스트가 너무 큼) 텍스트 (친구 이름)를 두 줄로 나누는 방법을 알아낼 수 없다는 것입니다.

나는 달성하고자하는 것을 단순화 한 예를 가지고 있습니다. 다음은 HTML입니다 :

<div class="modal"> 
    <div class="modal-body"> 
    <ul class="unstyled"> 
     <li class="store_selectable"> 
     <input class="checkbox" type="checkbox"> 
     <a href="#"> 
     <div class="store-text"> 
      <div class="iblock"><img alt="Missing" src="http://placehold.it/30x30"></div> 
      <div class="text"><div>This is the store</div></div> 
     </div> 
     </a> 
    </li> 
    </ul>

그리고 여기에 CSS의 : 여기 jsfiddle을 만든 I 쉽게 테스트 및 이해를 돕기 위하여

body { 
    padding: 20px; 
} 

li.store_selectable { 
    width:161px; 
    float:left; 
    margin:0 0px 6px 0px; 
    overflow:hidden; 
    font-size:0.9em; 
} 

li.store_selectable .checkbox { 
    float:left; 
    display:inline-block; 
    margin:12px 6px 0; 
} 

li.store_selectable .store-text { 
    display:block; 
    height:30px; 
} 

li.store_selectable img { 
    float:left; 
    display:block; 
    width:30px; 
    height:30px 
} 

li.store_selectable a { 
    display:block;text-decoration:none; 
    padding:2px; 
    outline:none; 
    color:#333; 
    border:1px solid #fff; 
    border-width:1px 0; 
} 

li.store_selectable a:hover { 
    background:cyan; 
    border:1px solid blue; 
    border-width:1px 0; 
} 

li.store_selectable .iblock { 
    display:inline-block; 
    vertical-align:middle; 
    overflow:hidden; 
    text-align:left; 
}

: 이제 http://jsfiddle.net/rikas/tpqHd/1/

, 내가 뭘하려는 경우 목록 항목의 너비가 충분히 작 으면이 줄을 변경하면 텍스트가 두 줄로 나뉘어집니다. width:161px;. facebook "친구 초대"모달 창에 흩 뜨리기 CSS 나는 그들이 그것을하는 것을 볼 수있다, 그러나 나는 할 수 있지 않는다!

도움 주셔서 감사합니다. 확실히 당신이 달성하려고하는 인터페이스 확신하지만, 텍스트하지 포장에 대한 이유하지

출처

2012-05-18 Ricardo Otero

는 당신의 체크 박스와 텍스트 클래스 자체 div 요소를 넣어 고려 제거한 후 CSS를

 overflow:hidden;

입니다 .fl

.fl { display:block; }

두 바로 아래

토륨과 다른 빈 div 요소를 만들고, 나란히 라인 하는 명확한

.clear { display:block; clear:both; line-height:0; }

의 E 클래스는 플로트를 상속하는 다음의 요소를 방지하기 위해 :

왼쪽

출처

2012-05-18 17:56:34

Facebook과 같은 친구 선택 확인란

답변

관련 문제