html - 列表内联元素中的图像和文本位置

Question

我正在尝试设计一个网页，其中有一个乐队列表，每张图片都是乐队徽标（或其他东西）的小型图片。我正在设置风格inline，我已经尝试过vertical-align等等line-height，但似乎没有任何效果。

我很确定我可以做到这一点，tables但我多次被告知这不是正确使用table.

    <div id ="Content">
        <ul>
            <li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
            <li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
            <li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
            <li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
            <li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>

        </ul>
    </div>

这是我拥有的少量 CSS

    #content li{display:inline;}
    img {
    max-height:100px;
    max-width: 100px;
    }

   #content ul{list-style-type: none;
    clear:left;
   }

任何帮助或提示将不胜感激

Answer 1

我最好的猜测是你正在寻找这个：

#content ul li {
   float:left; 
}

否则，您必须更具体地说明您要完成的工作。

Answer 2

如果我明白你想要做什么，试试这个：

#content li {
    display: inline-block;
    background-color: #eaeaea;
    border: 1px solid red;
    text-align: center;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    margin: 5px;
}

img {
    max-height:100px;
    max-width: 100px;
    display: block;
}

#content ul{
    list-style-type: none;
    clear:left;
}​

看看这里：http: //jsfiddle.net/zDhKQ/

Answer 3

我相信你想要对齐标签。像这样的东西：

<li><img src="IMG_3117.jpg" alt="Smiley face" width="42" height="42" align="left">This is some text.
</li>

会产生看起来不错的东西。