网站页面有不需要的水平滚动条答案

【问题标题】：website page has unwanted horizontal scroll bar网站页面有不需要的水平滚动条
【发布时间】：2021-08-08 00:00:56
【问题描述】：

我的网站有一个烦人的错误，当我使用实时服务器预览我的网站时，当滚动区域中没有内容时，会出现不需要的水平滚动条。我是一名新开发人员，所以我遇到了很多我可以解决的错误。有人可以帮我解决导致水平滚动条的代码错误。`

这是我的 HTML

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: black;
}

h1 {
  color: pink;
  padding-top: 10px;
  padding-left: 10px;
  font-family: sans-serif;
  text-align: center;
}

p {
  color: pink;
  font-family: sans-serif;
  padding-left: 5px;
  text-align: center;
}

.titles {
  border: 3px solid #fff;
  padding-top: 30px;
  padding-bottom: 30px;
}

header ul li {
  color: pink;
  list-style-type: none;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 30px;
  padding-bottom: 30px;
}

header ul {
  display: flex;
  position: relative;
  left: 400px;
}

header a {
  text-decoration: none;
  color: pink;
}

<header>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About Us</a></li>
  </ul>
</header>
<div class="titles">
  <h1>HI, I'm Anas and I'm a Junior Webdeveloper.</h1>
  <p>
    I have recently started coding and I am looking to persue a career in software engineering and web developing.
  </p>
</div>

【问题讨论】：

position: relative; left: 400px; 将标题向右推 400 像素。这可能是不想要的？
我要删除这个吗？
我想将标题 ul 居中，但我使用相对位置并使用 left: 400px;
不要使用position: relative 居中。
打开您的开发工具并检查元素，如果您在元素突出显示时仔细查看 CSS，那么一切都应该存在。

标签： javascript html css web

【解决方案1】：

调整你的标题 ul css 以利用 flexbox，这样你就不需要 padding-left: 400px，这会导致不需要的水平滚动：

header ul {
   display: flex;
   justify-content: flex-end;
}

【讨论】：

谢谢你，但现在我应该用什么来将 ul 居中到我的页面中间
您可以使用 'justify-content: center' 代替 'justify-content: flex-end' 来使列表居中。对于间距，您可以使用 align-items 属性。在此处了解有关 flexbox 的更多信息：css-tricks.com/snippets/css/a-guide-to-flexbox

【解决方案2】：

当内容超出屏幕宽度时，会在 HTML 中发生这种情况。快速修复也添加
overflow-x:hidden
所以在你的风格标签中添加

body{
overflow-x:hidden;
}

阅读更多关于溢出属性的信息
https://www.w3schools.com/cssref/pr_pos_overflow.asp
快乐编码！

【讨论】：