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

回答

相关问题