Question

我是CSS的新手，我想做的是为每个<li> </li>创建一个类。每行左侧有一个图像，图像旁边有一个div。我现在设置的方式是：

我的CSS：

.popular {
  max-width: 192px;
  max-height: 50px;
}

.popular img
{
  display: inline;
  max-width: 45px;
  max-height: 60px;
}

.popular div
{
  display: inline;
  max-width: 125px;
  max-height: 60px;
  margin-left: 65px;
}

我的HTML：

<li class="popular ">
 <img src="http://adaptiveblue.img.s3.amazonaws.com/movies/source_code/duncan_jones/tiny">
  <div>
   <p> Source Code </p>
   <p> Crap </p>
  </div>
 </li>

但他们都处于不同的界限。

Answer 1

在样式表中使用它：

display:inline

此外，只有<li>标记包含热门标记。您可以选择其他例如：

.popular div {
}

Answer 2

您是否在寻找类似的内容，http://jsfiddle.net/C5GMZ/？

编辑：我已将代码添加为Kazark请求。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <style>
        ul.popular {list-style:none;margin:0;padding:0;}
        ul.popular li {height:60px;margin-bottom:5px;width:192px}
        ul.popular li img {float:left;height:60px;margin-right:5px;width:80px;}
        ul.popular li div {float:left;width:107px}
    </style>
</head>
<body>
    <ul class="popular">
        <li>
            <img src="http://adaptiveblue.img.s3.amazonaws.com/movies/source_code/duncan_jones/tiny" width="80" height="60" alt="">
            <div>Lorem ipsum dolor sit amet...</div>
        </li>
        <li>
            <img src="http://adaptiveblue.img.s3.amazonaws.com/movies/source_code/duncan_jones/tiny" width="80" height="60" alt="">
            <div>Lorem ipsum dolor sit amet...</div>
        </li>
        <li>
            <img src="http://adaptiveblue.img.s3.amazonaws.com/movies/source_code/duncan_jones/tiny" width="80" height="60" alt="">
            <div>Lorem ipsum dolor sit amet...</div>
        </li>
    </ul>
</body>
</html>

保持图像和div在同一条线上

2 个答案: