Question

我在列表中对齐图像和内容时遇到问题。这是我的代码：

 <li> 
   <div class="small-view-image">
       <img src="../images/xyz.png" height="41" width="34" alt="Test" title="Test"/>
   </div>
   <div class="small-view-content">
     <a href='../xyz.html'>XYZ</a>
   </div>                        
 </li>

问题是我不能使用float left来对齐左边的图像和右边的内容。 alt text http://img831.imageshack.us/img831/271/layoutd.png

这是我期待的输出。我不能使用float：left因为页面是多语言的。欢迎任何建议或想法。

Answer 1

通过调整扩展dylanfm的答案，你的CSS将是：

li {
    position: relative;
    min-height: 50px;
}

.small-view-image {
    position: absolute;
    left: 0;
    top: 0;
}

.small-view-content {
    position: relative;
    left: 40px; /* Makes room for the image */
}

如果文字高于图片，这将确保您<li>正确地按下其他页面元素。

Answer 2

您可以将li设置为position: relative，并将图片和文字置于其中。

Answer 3

<li>
  <div>img src="../images/xyz.png" height="41" width="34" alt="Test" title="Test"/></div> 
  <a href='../xyz.html'>XYZ</a>

请注意，您仍然可以将特定样式应用于上述两个元素：

li > div {display:inline-block; width:?px}
li > a { ... }

根据评论编辑。

对齐没有浮动的DIV标签：左

3 个答案: