页面宽度超过100％？

时间：2020-10-03 14:10:31

标签： html css styles

我将宽度设置为100％，但是仍然有一个水平滑块。如您所见，主体似乎以100％结尾（右侧的填充和边距为0）。

enter image description here

我尝试摆弄 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>

1 个答案:

答案 0 :(得分：0)

在表中，您已定义宽度为40rem。我刚刚将其删除并为我解决了

* {
  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%;
}

.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;
}
  <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> -- -->

<head>
  <title>TTT!</title>
  <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

相关问题
最新问题