Question

我正在制作移动网络应用，我遇到了这个问题。

目前我的代码结构如下：

    <ul class="app-lst">
        <li class="item-1">
            <a href="#">
                <img src="img1.jpg" alt="img">
            </a>
        </li>
        <li class="item-2">
            <a href="#">
                <img src="img2.jpg" alt="img">
            </a>
        </li>
... etc.
    </ul>


CSS:
.item-1 {
    width: 90%;
    height: 10%;
}

.app-lst li a {
    background-color: red;
}

.app-lst li a img {
}

下图是我想要获得的结果。从上面的代码中可以看出，每个框都是<li>，在其下面有<a>，在链接下面有内容。

我如何使用CSS进行此操作？

- 我应该通过在<li>或<a>上放置宽度和高度来调整盒子的大小吗？

- 我应该通过在<a>上添加背景颜色来设置方框的颜色吗？

- 最后，图像不会调整到适合父<a>内部，因此如果图像较大，它会扩展整个框。我试过把＆＃34; max-width：100％＆＃34;在图像上，但没有运气。

此外，由于它是移动设计，我控制所有尺寸的百分比。这是一个很好的做法，还是应该用像素来做？

非常感谢您的帮助！

Example

Answer 1

您需要将<ul>用作设置为100％高度/宽度的容器，然后根据该容器调整<li>元素的大小。最后，将<img>元素设为100％高度和宽度。

<强> HTML

<ul class="app-lst">
    <li class="item-1">
        <a href="#">
            <img src="http://placehold.it/150x150" alt="img"/>
        </a>
    </li>
    <li class="item-2">
        <a href="#">
            <img src="http://placehold.it/150x150" alt="img"/>
        </a>
    </li>
    <li class="item-3">
        <a href="#">
            <img src="http://placehold.it/150x150" alt="img"/>
        </a>
    </li>
    <li class="item-4">
        <a href="#">
            <img src="http://placehold.it/150x150" alt="img"/>
        </a>
    </li>
    <li class="item-5">
        <a href="#">
            <img src="http://placehold.it/150x150" alt="img"/>
        </a>
    </li>
</ul>

<强> CSS

.app-lst {
    display: block;
    height: 500px;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.app-lst li {
    display: inline-block;
    float: left;
    margin: 0;
    padding: 0;
}

.item-1, .item-2 {
    height: 75%;
}

.item-1 {
    width: 75%;
}

.item-2 {
    width: 25%;
}

.item-3, .item-4, .item-5 {
    height: 25%;
}

.item-3 {
    width: 10%;
}

.item-4 {
    width: 20%;
}

.item-5 {
    width: 70%;
}

.app-lst li img {
    height: 100%;
    width: 100%;
}

JSFiddle：http://jsfiddle.net/b6x1byfp/

施放尺寸css在哪里？在li，a或img？

1 个答案: