一个图标的宽度比其他图标更大，识别CSS中的宽度

发布于 2025-02-05 12:42:27 字数 2568 浏览 1 评论 0原文

在我使用CSS作为FA图标来识别容器的宽度和高度之后，第一个图标的宽度比其他图标更大，我无法获得正确的宽度。无论如何，是否可以使它正确。

#features {
    margin-top: 35px;
}

.grid {
    display: flex;
}

#features .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20vw;
    height: 125px;
}

#features .desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5px;

}

<html>
<head>
<link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<div class="container">
            <section id="features">
                <div class="grid">
                    <div class="icon">
                        <i class="fa fa-3x fa-fire"></i>
                    </div>
                    <div class="desc">
                        <h2>Premium Materials</h2>
                        <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
                    </div>
                </div>
                <div class="grid">
                    <div class="icon">
                        <i class="fa fa-3x fa-truck"></i>
                    </div>
                    <div class="desc">
                        <h2>Fast Shipping</h2>
                        <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not statisfied.</p>
                    </div>
                </div>
                <div class="grid">
                    <div class="icon">
                        <i class="fa fa-3x fa-battery-full"></i>
                    </div>
                    <div class="desc">
                        <h2>Quality Assurance</h2>
                        <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
                    </div>
                </div>
            </section>
        </div>

原文

after i using a CSS for the fa icon to identify width and height for the container, and the first icon has a bigger width than others, and i couldn't get it a right width. Is there anyway that could make it right.

#features {
    margin-top: 35px;
}

.grid {
    display: flex;
}

#features .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20vw;
    height: 125px;
}

#features .desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5px;

}

<html>
<head>
<link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<div class="container">
            <section id="features">
                <div class="grid">
                    <div class="icon">
                        <i class="fa fa-3x fa-fire"></i>
                    </div>
                    <div class="desc">
                        <h2>Premium Materials</h2>
                        <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
                    </div>
                </div>
                <div class="grid">
                    <div class="icon">
                        <i class="fa fa-3x fa-truck"></i>
                    </div>
                    <div class="desc">
                        <h2>Fast Shipping</h2>
                        <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not statisfied.</p>
                    </div>
                </div>
                <div class="grid">
                    <div class="icon">
                        <i class="fa fa-3x fa-battery-full"></i>
                    </div>
                    <div class="desc">
                        <h2>Quality Assurance</h2>
                        <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
                    </div>
                </div>
            </section>
        </div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一直在等你来 2025-02-12 12:42:27

将宽度更改为最小宽度

#features {
    margin-top: 35px;
}

.grid {
    display: flex;
}

#features .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20vw; /* Change Here*/
    height: 125px;
}

#features .desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5px;

}

<html>
<head>
<link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<div class="container">
            <section id="features">
                <div class="grid">
                    <div class="icon">
                        <i class="fa fa-3x fa-fire"></i>
                    </div>
                    <div class="desc">
                        <h2>Premium Materials</h2>
                        <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
                    </div>
                </div>
                <div class="grid">
                    <div class="icon">
                        <i class="fa fa-3x fa-truck"></i>
                    </div>
                    <div class="desc">
                        <h2>Fast Shipping</h2>
                        <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not statisfied.</p>
                    </div>
                </div>
                <div class="grid">
                    <div class="icon">
                        <i class="fa fa-3x fa-battery-full"></i>
                    </div>
                    <div class="desc">
                        <h2>Quality Assurance</h2>
                        <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
                    </div>
                </div>
            </section>
        </div>

Change width to min-width

#features {
    margin-top: 35px;
}

.grid {
    display: flex;
}

#features .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20vw; /* Change Here*/
    height: 125px;
}

#features .desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5px;

}

<html>
<head>
<link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<div class="container">
            <section id="features">
                <div class="grid">
                    <div class="icon">
                        <i class="fa fa-3x fa-fire"></i>
                    </div>
                    <div class="desc">
                        <h2>Premium Materials</h2>
                        <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
                    </div>
                </div>
                <div class="grid">
                    <div class="icon">
                        <i class="fa fa-3x fa-truck"></i>
                    </div>
                    <div class="desc">
                        <h2>Fast Shipping</h2>
                        <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not statisfied.</p>
                    </div>
                </div>
                <div class="grid">
                    <div class="icon">
                        <i class="fa fa-3x fa-battery-full"></i>
                    </div>
                    <div class="desc">
                        <h2>Quality Assurance</h2>
                        <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
                    </div>
                </div>
            </section>
        </div>

回复收藏 0 原文

~没有更多了~