Question

CSS / HTML新手，我一直在尝试为网站项目创建导航栏。但是，我似乎无法让导航栏到达顶部/左/右边缘。我做错了什么？

ul.header {
  list-style-type: none;
  margin: 0;
  Padding: 0;
  width: 100%;
  background-color:rgb(97, 23, 214);
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;

}

li {
  display: block;
  padding: 6px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none
}

li.header {
  float: left;

}

li.right {
  text-align: right;
}

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" href=shell.css>
  </head>
<body>
  <ul class="header">
    <li class="header">Home</li>   
    <li class="header">About Me</li>
    <li class="header">Contact Me</li>
    <li class="right">JAIME<b>MONCAYO</b></li>
  </ul>    
  <h1> Lorem forem dorem amaculi laculi </h1> 
    <p class="header"> loret foret goret horet aboret </p>
</body>
</html>

Answer 1

将以下代码添加到CSS中。

＆＃13;

*{
  margin:0;
  padding:0;
}
ul.header {
    list-style-type: none;
    margin: 0;
    Padding: 0;
    width: 100%;
    background-color:rgb(97, 23, 214);
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;

}

li {
    display: block;
    padding: 6px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none
}

li.header {
    float: left;

}

li.right {
    text-align: right;
}

＆＃13;

<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href=shell.css>
<ul class="header">
<li class="header">Home</li>   
<li class="header">About Me</li>
<li class="header">Contact Me</li>
<li class="right">JAIME<b>MONCAYO</b></li>
</ul>    
    <h1> Lorem forem dorem amaculi laculi </H1> 
</head>
<body>
<p class="header"> loret foret goret horet aboret </p>
</body>
</html>

＆＃13;

它会删除HTML标记的所有填充和边距

Answer 2

浏览器添加了一些必须重置的css。最好使用Twitter Bootstrap，但这会带来一些复杂性。

因此暂时只需要这段CSS代码即可。

body {
 margin:0
}

Answer 3

head标记应该只包含脚本和样式。它不能包含ul或任何其他HMTL标记。以下是您的更新代码：

＆＃13;

* {
  margin: 0;
  padding: 0;
}

ul.header {
  list-style-type: none;
  margin: 0;
  Padding: 0;
  width: 100%;
  background-color: rgb(97, 23, 214);
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

li {
  display: block;
  padding: 6px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none
}

li.header {
  float: left;
}

li.right {
  text-align: right;
}

＆＃13;

<ul class="header">
  <li class="header">Home</li>
  <li class="header">About Me</li>
  <li class="header">Contact Me</li>
  <li class="right">JAIME<b>MONCAYO</b></li>
</ul>
<h1> Lorem forem dorem amaculi laculi </H1>
<p class="header"> loret foret goret horet aboret </p>

＆＃13;

Answer 4

请勿混淆head和header。您的ul应该在正文标记内。

 <!DOCTYPE HTML>
<head>
<link rel="stylesheet" href=shell.css>

<h1> Lorem forem dorem amaculi laculi </H1> 
</head>
<body>
    <ul class="header">
       <li class="header">Home</li>   
       <li class="header">About Me</li>
       <li class="header">Contact Me</li>
       <li class="right">JAIME<b>MONCAYO</b></li>
    </ul>    
    <p class="header"> loret foret goret horet aboret </p>
</body>
</html>

Answer 5

body标记始终是一个默认样式，它给了他margin: 8px;这就是阻止你到达边缘的原因，解决它将身体重置为margin: 0

/* Resetting the body margin */
body {
  margin: 0;
}

ul.header {
  list-style-type: none;
  margin: 0;
  Padding: 0;
  width: 100%;
  background-color:rgb(97, 23, 214);
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

li {
  display: block;
  padding: 6px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none
}

li.header {
  float: left;

}

li.right {
  text-align: right;
}

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" href=shell.css>
  </head>
<body>
  <ul class="header">
    <li class="header">Home</li>   
    <li class="header">About Me</li>
    <li class="header">Contact Me</li>
    <li class="right">JAIME<b>MONCAYO</b></li>
  </ul>    
  <h1> Lorem forem dorem amaculi laculi </h1> 
    <p class="header"> loret foret goret horet aboret </p>
</body>
</html>

HTML / CSS导航栏无法达到边缘

5 个答案: