Question

因此，我正在创建一个网站，但遇到了一个与列表有关的小问题。我的目的是使列表中的特定图像稍大一些，因为相对于其他图像而言显得较小。

为了在顶部和底部堆叠三个图像，我为顶部的三个和底部的三个创建了两个单独的列表。我认为这就是问题所在。

我尝试使用以下CSS代码解决此问题（请注意，我已使用2px使结果显而易见）

.white-container ul li:nth-child(3) img {
    width: 2px;
}

这将产生以下结果：https://imgur.com/C0jC6uY

HTML代码在这里：

<div class="white-container">
        <div class="container">
            <div>
                <ul class="firstthree">
                    <li>
                        <img src="images/brush.svg" class="brush" alt="brush">
                        <p class="brush">Graphic Design</p>
                    </li>
                    <li>
                        <img src="images/wand.svg" class="wand" alt="wand">
                        <p class="wand">UI Design</p>
                    </li>
                    <li>
                        <img src="images/code.svg" class="code" alt="code">
                        <p class="code">Front-end Dev</p>
                    </li>
                </ul>
            </div>

            <div>
                <ul class="secondthree">
                <li>
                    <img src="images/settings.svg" class="settings" alt="settings">
                    <p class="settings">Back-end Dev</p>
                </li>
                <li>
                    <img src="images/database.svg" class="database" alt="databases">
                    <p class = "database">Databases</p>
                </li>
                <li>
                    <img src="images/mobile.svg" class="mobile" alt="mobile">
                    <p class="mobile">Mobile Devices</p>
                </li>
            </ul>
            </div>
        </div>
    </div>

很显然，我不想更改右下角的图像。我无所适从。我尝试使用

.white-container ul firstthree li:nth-child(3) img {

我认为可以，但是没有用。任何帮助，将不胜感激。谢谢！

Answer 1

第一步是将您的两个列表合并为一个，因为从语义上来说应该如此。

<ul>
    <li>
        <img src="images/brush.svg" alt="brush">
        <p>Graphic Design</p>
    </li>
    <li>
        <img src="images/wand.svg" alt="wand">
        <p>UI Design</p>
    </li>
    <li>
        <img src="images/code.svg" alt="code">
        <p>Front-end Dev</p>
    </li>
    <li>
        <img src="images/settings.svg" alt="settings">
        <p>Back-end Dev</p>
    </li>
    <li>
        <img src="images/database.svg" alt="databases">
        <p>Databases</p>
    </li>
    <li>
        <img src="images/mobile.svg" alt="mobile">
        <p>Mobile Devices</p>
    </li>
</ul>

然后告诉浏览器以网格形式显示该列表。

ul {
    display: grid;
    list-style: none;
    grid-template-columns: repeat(3, 1fr);
}

然后，您可以在每个单元格内使用flex来垂直排列项目（ul > li { display: flex; flex-direction: column; }）。我把剩下的留给你。

更改列表中一幅图像的图像大小

1 个答案: