정렬되지 않은 목록으로 표 바꾸기

Question

표 사용을 제거하고 HTML 목록 (<ul> 및 <li>)으로 코드를 대체해야한다는 요구 사항이 있습니다. 대체 할 HTML 코드는 다음과 같습니다.

<table> 
    <tr> 
     <td> 
      <img width="40" height="40" src="../images/johnsmith2.jpg" alt="johnsmith2" /> 
     </td> 
     <td> 
      <table> 
       <tr><td>John Smith</td></tr> 
       <tr><td>24 years</td></tr> 
       <tr><td>Chicago</td></tr> 
      </table> 
     </td> 
    </tr> 
</table> 

목록을 사용하여 여러 옵션을 시도했지만이 표시를 얻을 수 없습니다. 오른쪽의 텍스트는 목록을 사용하여 항상 이미지 아래로갔습니다. 세로 텍스트 목록 (이름, 나이, 도시)을 이미지에 인접시켜야합니다. 즉, 목록은 위의 표에서 생성 된 것과 동일한 모양을 만들어야합니다.

어떻게 HTML 목록이있는 CSS를 통해이 작업을 수행 할 수 있는지 알려주십시오.

Answer 1

많은 튜토리얼이 있습니다. 계속 인터넷 검색을 사용하거나 w3schools.com을 사용해보십시오.

또는이를 확인할 수있다 :이를 위해 테이블 ​​속성 : 이 http://www.javascriptkit.com/script/script2/verticalmenu.shtml

Answer 2

당신은 디스플레이를 사용할 수 있습니다이를 위해이

<style> 
.profile li{ 
    float: right; 
    clear: right; 
} 
.profile .image{ 
    float: left; 
    clear: none; 
} 
</style> 
<ul class="profile"> 
    <li class="image"><img width="40" height="40" src="../images/johnsmith2.jpg" alt="johnsmith2" /></li> 
    <li>John Smith</li> 
    <li>24 years</li> 
    <li>Chicago</li> 
</ul> 

Answer 3

처럼 뭔가를 시도 할 수 있습니다. 다음과 같이 쓰기 :

CSS

<ul class="profile"> 
    <li><img width="40" height="40" src="../images/johnsmith2.jpg" alt="johnsmith2" /></li> 
    <li> 
     <ul> 
      <li>John Smith</li> 
      <li>24 years</li> 
      <li>Chicago</li> 
     </ul> 
    </li> 
</ul> 

확인 다음은이 http://jsfiddle.net/GCfSx/1/

Answer 4

.profile > li{ 
    display:table-cell; 
} 

.profile{ 
    display:table; 
} 

HTML하면 필요한 솔루션을 포함 jsFiddle에 대한 예제입니다 ...

http://jsfiddle.net/ZHbxr/16/

당신은 parent <ul> display as table과 inner <li> display as table-cell