html - 更改列表中一个图像的图像大小

问题描述

所以我正在创建一个网站，但遇到了与列表有关的小问题。我的目标是使列表中的特定图像略大，因为它相对于其他图像显得更小。

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

我尝试使用以下 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 {

我认为这会起作用，但无济于事。任何帮助，将不胜感激。谢谢！

标签： htmlcss

第一步是将您的两个列表合并为一个，因为从语义上讲它们应该是。

<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; }）。我会把剩下的留给你。

html - 更改列表中一个图像的图像大小

问题描述

解决方案

推荐阅读