HTML CSS對齊

我想將圖像和一些文字對齊在一起。如果你參考下面的代碼，將會有圖像和一些文字（姓名和年齡），我希望他們兩個彼此相鄰。我確實嘗試過漂浮：離開但仍然沒有運氣。HTML CSS對齊

感謝

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'> 
    <head> 
     <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> 
     <title></title> 
    <style> 
     img { 
      height: 10px; 
      width: 20px; 

     } 
     ul li{ 


      display:block; 
     } 
     ul { 
      margin: 0; 
      float: left; 
     } 
     #container { 
      margin: 10px 

     } 
    </style> 

    </head> 
    <body> 
    <div id="container"> 
    <p> 
    <img src="cat.jpg"> <ul><li>Source</li><li>Item Link Title</li> </ul> </p> 
    </div> 
    </body> 
</html>

來源

2010-01-18 Josh

是否將浮動：留在'img'和'ul'給你你需要的結果？至少它會讓他們「並排」。 – 2010-01-18 03:11:08

不...讓我一起並肩試試。謝謝 – Josh 2010-01-18 03:12:45

技術上你的HTML是無效的。一個列表是一個塊級元素，你不能（或不應該）將它們嵌入段落中，因爲它們只應該使用內聯元素。

您的標記中沒有提及任何名稱和年齡，所以我不確定您指的是哪裏。

編輯：把圖像左側，並有右側一個在另一個之上的兩個標籤，使用這個標記：

<div id="container"> 
<img src="cat.jpg"> 
<ul> 
    <li>Source</li> 
    <li>Item Link Title</li> 
</ul> 
</div>

，要麼這個CSS：

html, body, div, ul, li, img { padding: 0; margin: 0; border: 0 none; } 
#container { background: yellow; overflow: hidden; float: left; } 
#container img { float: left; } 
#container ul { list-style-type: none; float: left; background: green; }

容器上的float: left是可選的。這僅僅意味着它不像它的容器那麼寬。第一行是一個粗糙的重置CSS。我建議總是使用真正的CSS和DOCTYPE。

來源

2010-01-18 03:12:14 cletus

感謝您的幫助cletus我想要一個圖像，然後就在它旁邊我想源和項目鏈接標題下面的其他。 – Josh 2010-01-18 03:17:47

謝謝Cletus ...明白了。 – Josh 2010-01-18 04:15:04

你不能把一個無序的列表放在一個段落內（你可以，但它是無效的）。我不知道你在想什麼做的，但看看這有助於：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'> 
<head> 
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> 
    <title></title> 
<style type="text/css"> 
    img { 
     height: 10px; 
     width: 20px; 

    } 
    ul li{ 


     display:inline; 
    } 
    ul { 
     display:inline; 
    } 
    #container { 
     margin: 10px 

    } 
</style> 

</head> 
<body> 
<div id="container"> 

<img src="la.jpg" alt=""/> <ul><li>Source</li><li>Item Link Title</li> </ul> 
</div> 
</body> 
</html>

來源

2010-01-18 03:12:44 mark123

它的權利，但我得到了一些圖像和源之間的差距 – Josh 2010-01-18 03:20:24

你必須零填充上UL的填充。我不太喜歡這種標記的外觀。我希望在以任何方式解釋之前先看看你在嘗試什麼。 – mark123 2010-01-18 11:18:28

最小改變了代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'> 
    <head> 
     <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> 
     <title></title> 
    <style> 
     img { 
      height: 10px; 
      width: 20px; 

     } 
     ul li{ 


      display:block; 
     } 
     ul { 
      margin: 0; 
      padding-left:0; 
     } 
     #container { 
      margin: 10px 

     } 
    </style> 

    </head> 
    <body> 
    <div id="container"> 
    <p> 
    <img src="cat.jpg"> <ul><li>Source</li><li>Item Link Title</li> </ul> </p> 
    </div> 
    </body> 
</html>

說了這麼多，其他2個是正確的。如果你想成爲HTML嚴格的名單，真的不應該在一個段落內。

來源

2010-01-18 03:15:38 CSharper

HTML CSS對齊

回答

相關問題