몇 가지 아이콘을 줄 지어서 CSS 문제가 발생했습니다.

Question

몇 가지 아이콘이 줄 지어 서 문제가 발생했으며이를 설명하는 방법이 확실하지 않다는 점을 충분히 배웠습니다. 그래서 출력 된 것이 무엇인지 그림을 첨부했습니다. 나는 또한 css와 html 코드가 무엇인지 포함시켰다. 희망을 갖고 누군가가 올바른 방향으로 나를 도와줌으로써이 문제를 해결할 수 있습니다.

"편집", "보관", "삭제"아이콘이 그림의 첫 번째 행과 똑같은 오른쪽에 모두 표시되도록하고 싶습니다. alt text http://www.redsandstech.com/css_layout_problem.jpg

어떤 아이디어를 시작합니다 :

li { 
list-style-type:none; 
vertical-align: bottom; 
list-style-image: none; 
left:0px; 
text-align:left; 
} 
ul { 
list-style-type: none; 
vertical-align: bottom; 
list-style-image: none; 
left:0px; 
} 
ul#nav{ 
margin-left:0; 
padding-left:0px; 
text-indent:15px; 
} 

.portf_edit{ 
float:right; 
position: relative; 
right:50px; 
display:block; 
} 
.portf_archive{ 
float:right; 
position: relative; 
right:-5px; 
display:block; 
} 

.portf_delete{ 
float:right; 
position: relative; 
right: -60px; 
display:block; 
} 

가 여기에 출력되는이 작업은 다음과 같습니다

여기

<ul id="nav"> 
<li>California 
    <div class="portf_edit"> 
     <span> 
      <img src="../images/edit.png"> 
     </span> 
    </div> 
    <div class="portf_archive"> 
     <span> 
      <img src="../images/archive.png"> 
     </span> 
    </div> 
    <div class="portf_delete"> 
     <span> 
      <img src="../images/delete.png"> 
     </span> 
    </div> 
</li> 
<li>Hyrum 
    <div class="portf_edit"> 
     <span> 
      <img src="../images/edit.png"> 
     </span> 
    </div> 
    <div class="portf_archive"> 
     <span> 
      <img src="../images/archive.png"> 
     </span> 
    </div> 
    <div class="portf_delete"> 
     <span> 
      <img src="../images/delete.png"> 
     </span> 
    </div> 
</li> 

는 CSS입니다 : 여기

는 HTML입니까? 감사.

Answer 1

가장 쉬운 방법은 아래 그림과 같이 clear을 LI 스타일에 추가하여 플로트를 끄는 것입니다.

li { 
list-style-type:none; 
vertical-align: bottom; 
list-style-image: none; 
left:0px; 
text-align:left; 
clear: both; 
} 

Answer 2

당신의 CSS에이 추가 :

ul#nav div{ 
    overflow: hidden; 
} 

그것의 요점은 요소가 포함 강요 당할 것이다 다음 사업부에 overflow: hidden를 추가 할 경우 부동 요소가 0으로 된 div의 높이를 줄일 수 있다는 것입니다 따라서 플로팅 엘리먼트는 양의 높이를 갖는다.