Question

目前在无序列表中有一个图像列表。

<ul id="sponsors"><li><img src=.../></li>
<li><img src=.../></li><li><img src=.../></li>
</ul>

li标签的CSS如下：

float:left; margin:2px 4px; padding:0

由于我的图像高度不同，我希望它们与底部对齐。我了解这可以通过表格轻松实现， valign =“bottom” 。我一直在使用img标签和li标签上的 vertical-align：bottom ，但尝试似乎没有将图像对齐到底部。

我该怎么做呢？

Answer 1

在提供的<li>样式中，正在使用float属性。浮动元素时，它将从页面上元素布局的一般流程中删除。这意味着在您的示例中，每个<li>实际上浮动在包含它们的无序列表的边框之外，并且每个{4}}正好是所包含图像的高度和宽度。在这种情况下，vertical-align属性无需与底部对齐。

以下是一个演示此问题的简单示例。请注意，为了模拟不同高度的图像，我给每个<img>一个不同的height值（在CSS中）。为了了解渲染过程中发生的事情，我还在每个<li>和<ul>标记周围添加了边框。

<html>
<head>
<style>
    li { float:left; margin:2px 4px; padding:0; border: solid 1px black; }
    ul { border: solid 1px black; }
</style>
</head>
<body>
    <ul id="sponsors">
        <li><img style="height: 150px; width: 50px" src=.../></li>
        <li><img style="height: 50px; width: 50px" src=.../></li>
        <li><img style="height: 75px; width: 50px" src=.../></li>
    </ul>
</body>
</html>

希望这可以澄清这个问题。

您可以尝试使用display: inline上的<li>而非浮动它们。

<html>
<head>
<style>
    ul { list-style: none; border: solid 1px black; }
    li { display: inline; border: solid 1px black; }
    img { vertical-align: bottom; }
</style>
</head>
<body>
   <ul id="sponsors">
      <li><img style="height: 150px; width: 50px" src=.../></li>
      <li><img style="height: 50px; width: 50px" src=.../></li>
      <li><img style="height: 75px; width: 50px" src=.../></li>
   </ul>
</body>
</html>

Answer 2

您可以使用inline-block并排放置li元素：

li {
    display: inline-block;
    margin: 2px 4px;
    padding: 0;
}

这假设li img的默认vertical-align值为baseline。在jsfiddle上看到它：http://jsfiddle.net/LHutF/1/

使用CSS的valign =“bottom”

2 个答案: