매번 지우지 않고 li 요소에 두 요소를 플로팅하는 방법

Question

img (아이콘)과 텍스트를 플로팅하려는 곳에 누적 목록이 있습니다. 그러나 각 목록 항목 다음에 분명히 알 수있는 고통이 있습니다. 여기서 해결책은 무엇입니까? 어떤 팁을 더 깨끗하게 만드는 방법?

<ul> 
    <li><img src="#" /> <a href="#">Home</a></li> 
    <div class="clear"></div> 
    <li><img src="#" /> <a href="#">About</a></li> 
    <div class="clear"></div> 
</ul> 

Answer 1

당신은 clear에 li 요소를 만들 수 있습니다 ..

<ul> 
    <li class="clear"><img src="#" /> <a href="#">Home</a></li> 
    <li class="clear"><img src="#" /> <a href="#">About</a></li> 
</ul> 

---

경우에만 li (img과 a)의 내용을 떠 경우, 당신은 설정할 수 있습니다 li ~ auto 또는 hidden의 overflow이며 예상대로 작동합니다. .

li{overflow:auto;} 

데모http://jsfiddle.net/SqWHB/

Answer 2

에서 예, clearfix에 대한 클래스를 사용

이 CSS를 추가

.clearfix:before, .clearfix:after { 
    display: table; 
    line-height: 0; 
    content: ""; 
} 

.clearfix:after { 
     clear: both; 
} 

Answer 3

을 당신은 분명 하나의 시간이 필요합니다 ul 다음이다.

<ul> 
    <li><img src="#" /> <a href="#">Home</a></li> 
    <li><img src="#" /> <a href="#">About</a></li> 
</ul> 
<div class="clear"></div>