【发布时间】：2020-10-03 14:10:31
【问题描述】：
我已将宽度设置为 100%，但仍有一个水平滑块。如您所见，body 似乎以 100% 结束（右侧的 padding 和 margin 为 0）。
我试过摆弄 body 和 html 的宽度，但无济于事。右边（那里）的那个小空间（为什么）是什么（为什么），我应该如何删除它（以及水平滑块）？
* {
font-family: "Press Start 2P";
color: white;
background-color: dimgray;
}
body {
height: 367px;
width: 100%;
margin-right: 0;
margin-left: 0;
background-color: dimgray;
}
html {
background-color: dimgray;
width: 100%;
}
td {
border: 3px solid cornflowerblue;
width: 179px;
}
tr {
height: 179px;
}
table {
/* margin-top: 2.6%; */
border-collapse: collapse;
display: inline-block;
margin: 3.4% 0 2.6% 27.9%;
width: 40em;
}
.senter {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* margin-left: 20%; */
}
#reset {
width: 14em;
margin-bottom: 2.1%;
}
form {
width: 100%;
}
button {
/* color: red; */
width: 6.7em;
height: 2.2em;
margin-bottom: 0;
}
input {
width: 14.1em;
height: 1.7em;
margin: 3% 0 2.1%;
}
::placeholder {
padding-left: 7.4%;
color: lightgray;
}
#nam {
width: 20%;
margin: 0 auto;
display: block;
text-align: center;
margin-top: 2.78%;
}
#inLyn {
/* display: inline-block */
/* position: relative; */
height: 60em;
}
span {
position: absolute;
width: 20%;
margin-top: 23.4%;
font-size: 20px;
margin-left: 10%;
}
#later {
position: absolute;
margin-top: 23.4%;
margin-left: 6%;
}
#chec {
margin-top: 27.4%;
}
.left {
border-left: 0;
}
.bottom {
border-bottom: 0;
}
.right {
border-right: 0;
}
.top {
border-top: 0;
}<!DOCTYPE html>
<html>
<body>
<form class="senter">
<input type="text" id="naym" placeholder="Hoo aar yoo?" />
<input hidden type="text" name="id" id="id" />
<button type="button" id="play">Play!</button>
</form>
<span>0</span>
<table class="" align="center">
<tr>
<td class="left top" align="center"><img src="#" style="display: none;" /></td>
<td class="top" align="center"><img src="#" style="display: none;" /></td>
<td class="right top" align="center"><img src="#" style="display: none;" /></td>
</tr>
<tr>
<td class="left" align="center"><img src="#" style="display: none;" /></td>
<td align="center"><img src="#" style="display: none;" /></td>
<td class="right" align="center"><img src="#" style="display: none;" /></td>
</tr>
<tr>
<td class="left bottom" align="center"><img src="#" style="display: none;" /></td>
<td class=" bottom " align="center"><img src="#" style="display: none;" /></td>
<td class="right bottom" align="center"><img src="#" style="display: none;" /></td>
</tr>
</table>
<span id="later">0</span> -- -->
<!-- <div class="senter">
<button id="reset">NEXT GAME</button>
</div> -->
</body>
<head>
<title>TTT!</title>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="styl.css" />
<!-- <link rel="stylesheet" type="text/css" href="src/styl.css" /> -->
<!-- <script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
type="text/javascript"
></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<!-- <script src="clyint.js"></script> -->
<script src="script.js"></script>
</head>
</html>【问题讨论】：
-
BTW StackOverflow 不允许我添加我的 html，显然代码与文本太多
-
尝试将您的代码添加到 jsfiddle
-
@MehediHasanSiam 更好，我在这里添加了 sn-p