Question

我在图片下进行描述时遇到问题。我不知道我该怎么做......

HTML：

<div class="round-items">
    <ul id="items">
        <li><a href="#"><img src="images/avatar.png" />abc</a>
        </li>
        <li><a href="#"><img src="images/avatar.png" />abc</a>
        </li>
        <li><a href="#"><img src="images/avatar.png" />abc</a>
        </li>
        <li><a href="#"><img src="images/avatar.png" />abc</a>
        </li>
    </ul>
</div>

CSS：

.round-items {
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    height: 150px;
    white-space: nowrap;
}
ul#items {
    padding: 0;
    text-align: left;
}
ul#items li {
    display: inline;
    list-style: none;
    padding-left: 15px;
}

DEMO

Answer 1

我没有完全理解这个问题，但您想尝试让说明显示在图片下方，您可以将display:block;添加到img，如下所示

.round-items {
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    height: 150px;
    white-space: nowrap;
}
ul#items {
    padding: 0;
    text-align: left;
}
ul#items li {
    display: inline-block;
    list-style: none;
    padding-left: 15px;
}

ul#items li img{
    display:block;
}

<div class="round-items">
    <ul id="items">
        <li><a href="#"><img src="http://lorempixel.com/50/50" />abc</a>
        </li>
        <li><a href="#"><img src="http://lorempixel.com/50/50" />abc</a>
        </li>
        <li><a href="#"><img src="http://lorempixel.com/50/50" />abc</a>
        </li>
        <li><a href="#"><img src="http://lorempixel.com/50/50" />abc</a>
        </li>
    </ul>
</div>

图片下的HTML / CSS描述

1 个答案: