html网格的侧边有一行
提问于 2021-12-15 06:16:29
我只想看到网格的内线，但是根据屏幕的宽度，在右边会出现一条线。我不知道这是否是网格的工作方式，还是有办法解决它？
.grid-container {
position: absolute;
bottom: 0px;
width: 100%;
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(3, 1fr);
background-color: #000000;
padding: 0px;
}
.grid-item {
aspect-ratio: 1/1;
background-color: rgb(255, 255, 255);
padding: 4%;
padding-bottom: 0px;
font-size: 30px;
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="main_div">
<p>Player = </p>
<p id="player_display" style="font-size: 3rem;"></p>
<p id="winner_display"></p>
<div class=grid-container>
<div class="grid-item" id="1"></div>
<div class="grid-item" id="2"></div>
<div class="grid-item" id="3"></div>
<div class="grid-item" id="4"></div>
<div class="grid-item" id="5"></div>
<div class="grid-item" id="6"></div>
<div class="grid-item" id="7"></div>
<div class="grid-item" id="8"></div>
<div class="grid-item" id="9"></div>
</div>
</div>
<script src="./scripts.js"></script>
</body>
</html>
回答 1
Stack Overflow用户
发布于 2021-12-15 07:18:59
您需要为HTML页面添加重置。在CSS中添加
*{ margin:0;padding:0;box-sizing:border-box}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70365227
复制
腾讯云开发者
