Question

我正在尝试设计一个网页，其中我有一个乐队列表，每个图像都将是乐队徽标（或其他）的一小部分图片。我正在设置内联样式，我尝试了vertical-align和line-height等，似乎没有任何工作。我很确定我可以用表格完成这项工作，但我多次被告知这不是正确使用表格。（我还是CSS新手......如果你不知道的话）

    <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>

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

列表元素中的图像和文本位置

3 个答案: