html 5个元素，全部设置为20%，其中一个低于其他4个,为什么？[复制]

ttygqcqt 于 2023-02-10 发布在其他

关注(0)|答案(1)|浏览(103)

- 此问题在此处已有答案**：

（41个答案）
3天前关闭。
我正在制作投资组合网站。HTML：

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Krzysztof Włostowski</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
            <div class="langauges">
                <h3>Languages i knows</h3>
                <div class="panels">
                    <div class="panel">
                        <img src="imgs/html.png" alt="HTML Logo">
                        <h4>HTML</h4>
                    </div>
                    <div class="panel">
                        <img src="imgs/css.png" alt="CSS Logo">
                        <h4>CSS</h4>
                    </div>
                    <div class="panel">
                        <img src="imgs/javascript.png" alt="JavaScript Logo">
                        <h4>JavaScript</h4>
                    </div>
                    <div class="panel">
                        <img src="imgs/php.png" alt="PHP Logo">
                        <h4>PHP</h4>
                    </div>
                    <div class="panel">
                        <img src="imgs/sql.png" alt="SQL Logo">
                        <h4>SQL</h4>
                    </div>
                </div>
            </div>
</body>
<script>
    var date = new Date();
    var year = date.getFullYear();
    document.getElementById('credits').innerHTML = year;
</script>
</html>

CSS：

.languages{
    width: 100%;
}

.panels{
    width: 100%;
    text-align: center;
}

.panels .panel{
    width: 20%;
    display: inline-block;
}

.panels .panel img, .programs-list tr td img{
    width: 40px;
    height: auto;
}

我不明白为什么SQL面板低于其他面板（20x5 = 100对吗？）谢谢你的帮助。
是的我在乞求
将其设置为19%可以工作，但它不是完全对齐的。从外面到中间有这种感觉。Check out the problem

Html

来源：https://stackoverflow.com/questions/75367632/5-element-all-set-to-20-and-one-of-them-is-below-other-4-why

1条答案

按热度按时间

lyr7nygr1#

可能您有一个盒子模型冲突（尝试设置面板为盒子大小：border-box），和/或您可能具有任何类型的外部边框或填充，从而增加您的20%*5。
如果您希望. panel中的所有项目水平对齐，可以尝试以下操作：

.languages{
    width: 100%;
}

.panels{
    width: 100%;
    text-align: center;
+    display: flex;
+    align-items: center;
}

.panels .panel{
-    width: 20%;
+    width: 100%;
-    display: inline-block;
}

.panels .panel img, .programs-list tr td img{
    width: 40px;
    height: auto;
}

display flex告诉你的 Package 器div（默认情况下）强制所有元素水平显示，如果你想让flex在没有空间时打断元素行而不是强制溢出，你可以添加prop flex-wrap: wrap;。
下面是flexbox的演示：https://codepen.io/team/css-tricks/pen/EKEYob

赞(0）回复(0）举报 2023-02-10

我来回答

html 5个元素，全部设置为20%，其中一个低于其他4个,为什么？[复制]

1条答案

相关问题

热门标签

最新问答