为什么我的网站上有滚动条而不应该有? [英] Why do I have scroll bars on my website when there shouldn't be?

查看：63
本文介绍了为什么我的网站上有滚动条而不应该有?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在制作一个不和谐服务器网站，供人们找到不和谐服务器加入并结交朋友，但是，我不知道为什么我的网页有一个水平滚动条.它还有一个垂直滚动条，现在应该没有这是我的 HTML 和 CSS

HTML:

<html lang="en"><头><元字符集=UTF-8"><元名称=视口"内容=宽度=设备宽度，初始比例=1.0"><link rel="样式表";href="style.css"><title>OnTop 服务器</title><身体><nav class="topnav"><div class="topnav-right"><a class="active";href=index.html">首页</a><a href="search.html">搜索</a><a href="servers.html">服务器</a>

<h2 class="title">OnTop 服务器</nav><中心><div类=欢迎"><div class="center-text"><div class="welcome-body-inner"><h2 class="head">发现<span class="discord-logo">DISCORD</span>服务器<h3 class="body">寻找令人惊叹的服务器来与之互动并结交朋友

</中心><页脚><div class="container"><div class="column"><ul class="footer-links"><li><a class="link-text";href="index.html";标题=家">主页<li><a class="link-text";href="search.html";标题=搜索">搜索<li><a class="link-text";href="servers.html";title="服务器">服务器<li><a class="link-text";href="https://discord.gg/";目标=_blank">官方 Discord 服务器<li><a class="link-text";href="termsofservice.html";目标=_blank">服务条款</a><li><a class="link-text";href="guidelines.html";目标=_blank">准则</a>

<div class="版权"><p class="copyright-text">&copy;版权所有 2020 OnTop Servers</p>

</页脚></html>

CSS:

 .row::after {清楚:两者；显示:表；}.版权{位置:绝对；底部:1%；正确:1%；字体大小:15px；}.copyright-text {白颜色;}.footer-links {位置:绝对；底部:5%；}.link-text {白颜色;文字装饰:无；}.容器 {填充:0；边距:0；}李{列表样式类型:无；}页脚{位置:绝对；底部:0%；清楚:两者；高度:200px；宽度:1920px；颜色:#fff;背景:#2c2c2c；}.欢迎 {边距顶部:-2.5rem；宽度:100%；高度:35.5rem；行高:1.8em；底边距:.4em；填充:0；字体系列:Helvetica；字体粗细:600；字体大小:1.5em；颜色:#ffff；文本转换:大写；}.center-text {位置:相对；左:24.5%；显示:弹性；对齐项目:居中；填充:0 1.5rem；}.discord-logo {边框:0；字体:0/0 一个；文字阴影:无；颜色:透明；显示:内联块；填充:.6em 0;背景: url(images/Discord-Wordmark-White.png) 中心不重复；背景大小:包含；字体大小:1em；}.头 {底边距:.4em；填充:0；行高:1.4；字体粗细:600；字体大小:2em；}.身体 {边距:0 自动 1em；文本转换:继承；不透明度:85%；}

我该如何解决这个问题，它真的困扰着我，我无法弄清楚问题是什么?

解决方案

就是这样的组合

位置:相对；左:24.5%；显示:弹性；

您有一个块级框，因此它的边距区域与其容器一样宽，然后将其容器宽度的 24.5% 向右移动，使其右边缘距容器左边缘 124.5%.那总是会水平溢出容器.

我建议使用 margin-left 而不是 left.

I'm making a discord server website for people to find discord servers to join and make friends but, I dont know why my web page has a horizontal scroll bar. It also has a vertical scroll bar and it shouldn't have that yet here is my HTML and CSS

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>OnTop Servers</title>
</head>
<body>
    <nav class="topnav">
        <div class="topnav-right">
        <a class="active" href="index.html">Home</a>
        <a href="search.html">Search</a>
        <a href="servers.html">Servers</a>
        </div>
         <h2 class="title">
            OnTop Servers
        </h2>
    </nav>
    <center>
        <div class="welcome">
            <div class="centered-text">
                <div class="welcome-body-inner">
                <h2 class="head">
                    DISCOVER
                    <span class="discord-logo">DISCORD</span>
                    SERVERS
                </h2>
                <h3 class="body">
                    Find amazing servers to interact with and make friends
                </h3>
                </div>
            </div>
        </div>
    </center>

    <footer>
        <div class="container">
            <div class="column">
                <ul class="footer-links">
                    <li>
                        <a class="link-text" href="index.html" title="Home">
                            Home </a>
                    </li>
                    <li>
                        <a class="link-text" href="search.html" title="Search"> 
                            Search </a>
                    </li>
                    <li>
                        <a class="link-text" href="servers.html" title="Servers"> 
                            Servers </a>
                    </li>
                    <li>
                        <a class="link-text" href="https://discord.gg/" target="_blank">
                            Official Discord Server </a>
                    </li>
                    <li>
                        <a class="link-text" href="termsofservice.html" target="_blank">
                            Terms Of Service </a>
                    </li>
                    <li>
                        <a class="link-text" href="guidelines.html" target="_blank">
                            Guidelines </a>
                    </li>
                </ul>
            </div>   
        </div>
        <div class="copyright"> 
            <p class="copyright-text">&copy; Copyright 2020 OnTop Servers</p>
            </div>
        </footer>
</body>
</html>

CSS:

  .row::after {
    clear: both;
    display: table;
  }

.copyright {
    position: absolute;
    bottom: 1%;
    right: 1%;
    font-size: 15px;
}

.copyright-text {
  color: white;
}

.footer-links {
  position: absolute;
  bottom: 5%;
}

.link-text {
  color: white;
  text-decoration: none;
}

.container {
  padding: 0;
  margin: 0;
}

li {
  list-style-type: none;
}

footer {
  position: absolute;
  bottom: 0%;
  clear: both;
  height: 200px;
  width: 1920px;
  color: #fff;
  background: #2c2c2c;
}

.welcome {
  margin-top: -2.5rem;
  width: 100%;
  height: 35.5rem;
  line-height: 1.8em;
  margin-bottom: .4em;
  padding: 0;
  font-family: Helvetica;
  font-weight: 600;
  font-size: 1.5em;
  color: #ffff;
  text-transform: uppercase;
}

.centered-text {
  position: relative;
  left: 24.5%;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
}

.discord-logo {
  border: 0;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
  display: inline-block;
  padding: .6em 0;
  background: url(images/Discord-Wordmark-White.png) center no-repeat;
  background-size: contain;
  font-size: 1em;
}

.head {
  margin-bottom: .4em;
  padding: 0;
  line-height: 1.4;
  font-weight: 600;
  font-size: 2em;
}

.body {
  margin: 0 auto 1em;
  text-transform: inherit;
  opacity: 85%;
}

how do I fix this this problem it is really bugging me and I cant work out what the problem is?

解决方案

It's this combination

position: relative;
left: 24.5%;
display: flex;

You've got a block level box, that's margin area is therefore as wide as its container, then it's shifted 24.5% of the width of its container to the right, making its right edge 124.5% from the container's left edge. That's always going to overflow the container horizontally.

I suggest using margin-left instead of left.

这篇关于为什么我的网站上有滚动条而不应该有?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆