如何在html / css中使导航栏与页面的其余部分没有空间?

伊甸园

我正在创建一个网站作为投资组合,以介绍我​​在IT领域的发展道路,但是我的问题是我的导航栏在其本身与页面的其余部分之间有一个空格。

我试过使用border,margin,width但没有用

body {
    background-color : #B31854;
}


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #900C3F;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #740A33;
}


h1 {
    font-family : Schluber;
    color : #D7BDE2 ;
}
p {
color : #D7BDE2 ;
width:300px;
margin : auto;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="file:///F:/Site%20web/Exemple%20css.css">
<style>
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#accueil">Accueil</a></li>
  <li><a href="#monparcours">Mon Parcours</a></li>
  <li><a href="#mesprojets">Mes Projets</a></li>
  <li><a href="#contact">Contact</a></li>

</ul>



<center><h1>Bienvenue sur mon portfolio !</h1></center>




</body>
</html>

预期结果类似于以下网站navbar:http : //axel-chapelain.com/

实际结果是这样的:https : //www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizo​​ntal_black

aloisdg移至codidact.com

我认为您正在寻找删除默认的正文边距。尝试使用以下方法重置它:

body {margin:0;}

将规则添加到CSS的顶部。

演示:

body {
    margin: 0; /* reset happened here */
    background-color : #B31854;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #900C3F;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #740A33;
}


h1 {
    font-family : Schluber;
    color : #D7BDE2 ;
}
p {
color : #D7BDE2 ;
width:300px;
margin : auto;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="file:///F:/Site%20web/Exemple%20css.css">
<style>
</style>
</head>
<body>
<ul>
  <li><a class="active" href="#accueil">Accueil</a></li>
  <li><a href="#monparcours">Mon Parcours</a></li>
  <li><a href="#mesprojets">Mes Projets</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>
<center><h1>Bienvenue sur mon portfolio !</h1></center>
</body>
</html>

另外,您可能想重置更多默认值。请参阅CSS工具:重置CSS有关堆栈溢出的更多信息:CSS重置-它到底是做什么的?默认<body>边距有多宽

如果您查看源代码,将会发现:

html, body { /* I cut a lot of tags here */
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

除了完全重置外,您可能希望跨浏览器标准化CSS。检查Normalize.css

如果您查看源代码,将会发现:

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

我认为值得一提的是,另一个可行的解决方案是在包装整个HTML的包装器中添加负边距。请不要那样做。没有人愿意处理这种骇人的解决方法。不要打架浏览器; 重置它。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何使导航栏与页面的其余部分重叠?

如何防止引导导航栏与页面的其余部分一起滚动

如何防止 CSS 动画移动我页面的其余部分?

PHP if语句停止加载HTML页面的其余部分

如何在使html页面的其余部分变暗的同时保持悬停区域的背景颜色/不透明度?

如何在不将页面的其余部分向下推的情况下显示模态?

如何将导航栏下拉列表与导航栏链接的其余部分对齐?

如何在没有导航页面的情况下更改状态栏颜色

如何创建两个部分,一个部分具有全屏图像,另一部分具有页面的其余部分

如何使部分可滚动并且与页面的其余部分一样高?

防止自定义(损坏的)HTML破坏页面的其余部分

如何在导航栏 html + css 中使图像响应

如何使粘性div漂浮在页面的其余部分上?

如何使html页面的一个区域重定向到另一个url,而页面的其余部分保持不变?

Xamarin Forms-如何在没有导航页面的情况下更改状态栏的颜色

固定导航栏在向下滚动时被页面的其余部分覆盖

如何创建一个滑动侧导航栏,在打开时使网站的其余部分变暗?

如何在所有页面的导航栏中添加图标?

如何在每个页面的导航栏中显示数据?

html导航栏按钮没有填满整个空间

如何在Python中使用threading.Thread产生其其余部分?

如何在 python 变量或字符串中使用文字 # 而不注释掉其余部分?

如何在CSS中删除此边距而不影响网站的其余部分?

CSS规则泄漏到页面的其余部分

如何在 html/css 中使文本响应?

如何忽略其余部分?

当用户查看页面的特定部分时如何更改导航栏图标的颜色

页面其余部分的CSS

如何在 Python 中压缩数组但保留其余部分?