Question

我正在页面上工作，我看到右边有一个很大的空白空间，可以看到它移动了滚动条。如何删除它？

这是我的代码：

`<!doctype html>
<html>
<head>
<title>Agenda - Central de Estudos</title>
<meta charset="utf-8">
<meta name="author" content="Bruno M. B. Sdoukos">
<meta name="description" content="Central de estudos. Todas as matérias. Temas abordados em sala de aula.">
<meta name="keywords" content="estudo, matéria, escola">
<link rel="stylesheet" href="G:/TRABALHOS/Central de estudos - Arquivos/header_style.css">
<link rel="stylesheet" href="G:/TRABALHOS/Central de estudos - Arquivos/footer_style.css">
<style>
h1{text-align: center;}
h2{font-size: 18px;}
article{
    margin: 30px;
    height: 721.5px;
}
@font-face{
    font-family: Sepet;
    src: url(G:/Programação/Webdesign/Curso-de-Webdesign/Projeto-Fashion/Fontes/Sepet.ttf);
}
article img{
    width: 700px;
    position: absolute;
    bottom: 250px;
    left: 900px;
}
.handwriting{
    font-family: Sepet;
    font-size: 30px;
    position: relative;
    left: 1000px;
    bottom: 150px;
}
.handwriting a{
    text-decoration: none;
}
</style>
</head>
<body>
    <header>
        <h1>Central de Estudos<span>     <a href="file:///G:/TRABALHOS/Central de Estudos - Arquivos/index-login-on.html">Início</a> <a href="#">Matérias</a> <a href="file:///G:/TRABALHOS/Central%20de%20estudos%20-%20Arquivos/Exerc%C3%ADcios.html">Exercícios</a> <a href="file:///G:/TRABALHOS/Central%20de%20estudos%20-%20Arquivos/Agenda.html">Agenda</a> <a href="file:///G:/TRABALHOS/Central%20de%20estudos%20-%20Arquivos/Login-login-on.html">Login</a></span></h1>
        <img src="https://cdn.pixabay.com/photo/2018/07/20/12/26/earth-3550553_960_720.png" alt="Globo escolar">
    </header>
    <main>
        <article>
            <h1>Agenda</h1>
            <hr>
            <h2>Tarefas</h2>
            <ul>
               <li>25/03/2019 | Ciências | Livro - Pg. 17 Ex. 7</li>
               <li>26/03/2019 | Português | Livro - Pg. 46</li>
               <li>26/03/2019 | Geografia | Caderno - Atividade 07</li>
            </ul>
            <h2>Provas</h2>
            <ul>
                <li>26/03/2019 | Artes | Conteúdos abordados (diversos)</li>
                <li>01/04/2019 | Ciências | O ser humano (visão geral) e a célula (visão geral)</li>
            </ul>
            <h2>Entrega de trabalhos</h2>
            <p>Não há trabalhos para entrega no momento.</p>
            <img src="https://cdn.pixabay.com/photo/2012/04/18/14/41/opened-37229_960_720.png">
            <p class="handwriting"><a href="#">Aulas</a></p>
        </article>
    </main>
    <footer>
        <p>Autoria do site de Bruno M. B. Sdoukos.</p>
        <p>Copyright &copy; 2019</p>
    </footer>
</body>
</html>`

我认为边距没有问题，我已经尝试过将“ margin：0”置于“样式”中，但这并不能解决问题。

Obs：该页面在我计算机的文件中，因此无法在此处放置其URL。

Answer 1

一种可以自己调试的方法是添加以下CSS规则：

* {
  border: 1px solid red;
}

这样做将立即向您显示哪些元素负责滚动。

有两个元素会由于其left属性值较大而导致水平滚动。要么删除这些较大的值，要么重新考虑布局以适合起始视口。

article img {
  width: 700px;
  position: absolute;
  bottom: 250px;
  left: 900px; /* <-- Causing horizontal scroll */
}
.handwriting {
  font-family: Sepet;
  font-size: 30px;
  position: relative;
  left: 1000px; /* <-- Causing horizontal scroll */
  bottom: 150px;
}

Answer 2

.handwriting{
font-family: Sepet;
font-size: 30px;
position: relative;
left: 1000px;
bottom: 150px;
}

“ left：1000px”正在推送

<p class="handwriting"><a href="#">Aulas</a></p>

向右移动导致页面其余部分留空

如何从页面中删除较大的空白空间？

2 个答案: