在div之间有一个空格，我不明白为什么？
在div之间有一个空格，我不明白为什么？
提问于 2022-11-11 21:49:31
大厅里有彼此之间的空间，但当我移除集装箱的中心代码时，它就被修复了。
对不起，我的英语不好，我试着用翻译来表达我的问题。
html码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="header">
<div id="lobbies" class="active">
<p><i class="fa-solid fa-earth-americas"></i> Lobbies</p>
</div>
<div id="private-lobbies">
<p><i class="fa-solid fa-lock"></i>Private Lobbies</p>
</div>
<div id="gamemodes">
<p><i class="fa-solid fa-gamepad"></i> Gamemodes</p>
</div>
</div>
<main>
<div id="lobbies-section">
<div class="info">
<h1 class="title">6 Active Lobbies</h1>
<p class="description">Select a session and join.</p>
</div>
<div class="list">
<div class="details">
<div class="flex-1"><i class="fa-solid fa-circle"></i></div>
<div class="flex-8">name</div>
<div class="flex-5">owner</div>
<div class="flex-4">players</div>
<div class="flex-1"></div>
</div>
<div class="active-lobbies">
<div class="lobbies">
<div class="lobby list-items">
<div class="flex-1 random-color"><i class="fa-solid fa-circle"></i></div>
<div class="flex-8">Frosty's Fun Lobby</div>
<div class="flex-5">frosty</div>
<div class="flex-4">31</div>
<div class="flex-1"><i class="fa-solid fa-right-to-bracket"></i></div>
</div>
<div class="lobby list-items">
<div class="flex-1 random-color"><i class="fa-solid fa-circle"></i></div>
<div class="flex-8">Frosty's Fun Lobby</div>
<div class="flex-5">frosty</div>
<div class="flex-4">31</div>
<div class="flex-1"><i class="fa-solid fa-right-to-bracket"></i></div>
</div>
<div class="lobby list-items">
<div class="flex-1 random-color"><i class="fa-solid fa-circle"></i></div>
<div class="flex-8">Frosty's Fun Lobby</div>
<div class="flex-5">frosty</div>
<div class="flex-4">31</div>
<div class="flex-1"><i class="fa-solid fa-right-to-bracket"></i></div>
</div>
<div class="lobby list-items">
<div class="flex-1 random-color"><i class="fa-solid fa-circle"></i></div>
<div class="flex-8">Frosty's Fun Lobby</div>
<div class="flex-5">frosty</div>
<div class="flex-4">31</div>
<div class="flex-1"><i class="fa-solid fa-right-to-bracket"></i></div>
</div>
<div class="lobby list-items">
<div class="flex-1 random-color"><i class="fa-solid fa-circle"></i></div>
<div class="flex-8">Frosty's Fun Lobby</div>
<div class="flex-5">frosty</div>
<div class="flex-4">31</div>
<div class="flex-1"><i class="fa-solid fa-right-to-bracket"></i></div>
</div>
</div>
<div class="lobby-info">
</div>
</div>
</div>
</div>
</main>
</div>
<script src="main.js"></script>
</body>
</html>css码
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css");
* {
margin: 0;
padding: 0;
outline: 0;
list-style: none;
box-sizing: border-box;
text-decoration: none;
user-select: none;
}
::-webkit-scrollbar {
width: 4px;
}
::-webkit-scrollbar-track {
background: rgba(4, 5, 7, 0.9);
}
::-webkit-scrollbar-thumb {
background: rgb(209, 95, 118);
}
html,
body {
font-family: "Noto Sans", sans-serif !important;
height: 100%;
width: 100%;
color: #fff;
}
.container {
width: 60vw;
height: 60vh;
position: relative;
/*top: 50%;
left: 50%;
transform: translate(-50%, -50%);*/
}
.container .header {
width: 100%;
height: 60px;
font-size: 18px;
margin-bottom: 20px;
display: flex;
justify-content: space-around;
}
.container .header div {
flex: 1;
background-color: rgba(4, 5, 7, 0.9);
margin-left: 5px;
cursor: pointer;
}
.container .header div p {
text-align: center;
line-height: 60px;
}
.container .header div p i {
padding-right: 5px;
}
.container .header div:nth-child(1) {
margin-left: 0;
}
.container .header .active {
color: rgb(4, 5, 7);
background-color: rgba(255, 255, 255, 0.8);
border-bottom: 5px solid rgb(209, 95, 118);
}
main .info {
color: rgba(255, 255, 255, 0.75);
background-color: rgba(4, 5, 7, 0.9);
padding-left: 5px;
}
main .info .description {
margin-bottom: 1px;
padding-bottom: 5px;
}
main .list {
font-size: 14px;
}
main .list .details {
overflow: auto;
scrollbar-gutter: stable;
padding: 13px 10px;
margin-bottom: 1px;
background-color: rgba(4, 5, 7, 0.9);
font-weight: bolder;
display: flex;
}
main .list .active-lobbies {
overflow-y: auto;
overflow-x: hidden;
height: 36.5vh;
}
main .list .active-lobbies .lobby {
padding: 13px 10px;
background-color: rgba(4, 5, 7, 0.9);
display: flex;
}
.flex-1 {
flex: 1;
}
.flex-2 {
flex: 2;
}
.flex-3 {
flex: 3;
}
.flex-4 {
flex: 4;
}
.flex-5 {
flex: 5;
}
.flex-6 {
flex: 6;
}
.flex-7 {
flex: 7;
}
.flex-8 {
flex: 8;
}
.flex-9 {
flex: 9;
}通过使用display对齐容器，对齐内容和对齐项解决了我的问题，但我试图理解这一点。
回答 1
Stack Overflow用户
发布于 2022-11-11 22:05:40
通常，您使用的技术是对绝对定位的元素进行对中，因为它们不尊重DOM流。对像您这样的非绝对定位元素进行对中就足够了：
element {
display: flex;
justify-content: center;
align-items: center;
}当您在某些时候使用translate对元素进行居中处理时，您可以从呈现非完整像素(如12.5px)中得到这个问题，这些像素是在翻译50%时由CSS计算的。假设元素的高度为271 of ，当您将其转换为50%时，它将移动135，5 of。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74408476
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号