HTML 在带有 "overflow-x:scroll"的图像列表下添加文本

Question

目前，我可以使用以下 html 代码对图像列表执行 css-overflow-x。

<div id="category" style="overflow-x:scroll; width:100%; white-space: nowrap; height:25%;">
    <a href="index.html"><img id="category_1" width="auto" height="50%" src="icon_1_d.png" style="position: relative; top:10%;"/></a>
    <a href="index2.html"><img id="category_2" width="auto" height="50%" src="icon_2_d.png" style="position: relative; top:10%;"/></a>
    <a href="index3.html"><img id="category_3" width="auto" height="50%" src="icon_3_d.png" style="position: relative; top:10%;"/></a>
</div>

下面是示例图。

但是现在，我需要为每个类别添加描述，例如category_1 的 desc_1。像这样，

我修改了代码如下

<div id="category" style="overflow-x:scroll; width:100%; white-space: nowrap; height:25%;">
    <div style="position: relative; top:10%;" width="auto" height="50%">
        <a href="index.html"><img id="category_1" width="auto" height="50%" src="icon_1_s.png"/></a>
        <p style="color: red">desc_1</p>
    </div>
    <div style="position: relative; top:10%;" width="auto" height="50%">
        <a href="index2.html"><img id="category_2" width="auto" height="50%" src="icon_2_d.png"/></a>
        <p style="color: red">desc_2</p>
    </div>
    <div style="position: relative; top:10%;" width="auto" height="50%">
        <a href="index3.html"><img id="category_3" width="auto" height="50%" src="icon_2_d.png"/></a>
        <p style="color: red">desc_3</p>
    </div>
</div>

但它存在以下问题。

(1) 图片大小为100%，不能调整为50%

(2) 将失去“overflow-x:scroll”样式，即类别不能水平滚动。

有人有什么想法吗？

提前致谢。

埃里克

Answer 1

如果您的问题只是限制/调整宽度，请尝试使用 max-width 代替:

max-width: 50%;

http://jsfiddle.net/6stwY/