내 HTML/CSS를

내 전체 HTML 여기 & CSS에 대한 이미지와 텍스트를 정렬하는 방법내 HTML/CSS를

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head><style> 

ul.ItemList, ul.ItemList li 
{ 
    list-style-type: none; 
    list-style-position: outside; 
    list-style-image: none; 
} 
ul.ItemList li.Item 
{ 
    padding-top: 15px; 
    padding-right: 15px; 
    padding-bottom: 15px; 
    padding-left: 15px; 
    border-top-color: #ddd; 
    border-top-width: 1px; 
    border-top-style: solid; 
} 
ul.ItemList div.Desc 
{ 
    font-size: 12px; 
    margin-bottom: 10px; 
} 
ul.ItemList div.Desc span.Title img 
{ 
    width: 60px; 
    height: 60px; 
    overflow: hidden; 
    margin-top: 0px; 
    margin-right: 10px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    float: left; 
} 
ul.ItemList div.Desc span 
{ 
    line-height: 2.5; 
    padding-left: 10px; 
} 
ul.ItemList div.Desc span.Title 
{ 
    padding-top: 0px; 
    padding-right: 0px; 
    padding-bottom: 0px; 
    padding-left: 0px; 
} 
ul.ItemList div.Desc span.Title a 
{ 
    font-size: 14px; 
    font-weight: bold; 
} 

</style></head> 
<body><center><table cellSpacing="0" cellPadding="0"><tbody><tr> 

<td align="middle"> 

<br /> 

<ul class="ItemList"> 

    <li class="Item"> 
    <div class="Desc"> 
    <span class="Title"> 
    <a href=""><img alt="" src="" /></a><a href="">Item1</a></span> 
    </div> 
    Item1 
    </li> 

    <li class="Item"> 
    <div class="Desc"> 
    <span class="Title"> 
    <a href=""><img alt="" src="" /></a><a href="">Item2</a></span> 
    </div> 
    Item2 
    </li> 

</ul> 
</td> 

</tr></tbody></table></center></body></html>

는 괜찮아

ul.ItemList div.Desc span.Title img 
{ 
    width: 100px; 
    height: 100px;

이미지 크기가 상관없이 이미지가 항상 오른쪽 텍스트와 잘 정렬되도록 개선하려면 어떻게해야합니까?

출처

2012-12-04 newuser

는 오버 플로우를 추가 : 자동 ul.ItemList li.Item

ul.ItemList li.Item 
{ 
    padding: 15px; 
    border-top: #ddd 1px solid; 
    overflow:auto 
}

DEMO

출처

2012-12-04 09:36:03 Sowmya

근무에! 고맙습니다. – newuser

내 HTML/CSS를

답변

관련 문제