Question

我正在创建自己的网站。使用无序列表制作我自己的标题+导航栏。

我遇到的问题是标题未扩展到浏览器的边缘。这种方法的唯一方法是在css＆＃34; header＆＃34;中使用。

position:absolute;

我不想使用绝对定位，但希望将标题保持在最顶端。

这是＆＃34;填充＆＃34;由于浏览器默认设置沿着标题？（CSS重置可以解决吗？）

HTML：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="certscss.css" rel="stylesheet" type="text/css">
</head>




<body>
<header>
<h2>My website!</h2>
    <ul>
        <li> <a href="aboutme.html">About Me </a></li>
        <li> <a href="accomplishments.html">Accomplishments </a></li>
        <li class="activemenutab"> <a href="certs.html">Certifications and Skills </a></li>
        <li> <a href="extra.html">Extracirriculars </a></li>
        <li> <a href="portfolio.html">Portfolio </a></li>
        <li> <a href="contact.html">Contact </a></li>
    </ul>
</header>

<h3>Certifications and Skills</h3>




    <footer>
          &copy; Mywebsite 2015
    </footer>


</body>
</html>

CSS：

@charset "UTF-8";



html {
    background-color:#B5B5B5
}

header { 
    left:0;
    right:0;
    margin:0;
    top:0;
}

h2 {
    background-color:#000000;
    color:#d9d9d9;
    text-align:center;
    font-size: 2.8em;
    margin:0;
}

ul {
    list-style-type:none; /* takes symbols away from unordered list */
    margin:0; /* shifts ul up against h2, and shifts it up in the header box */
    background-color:#d9d9d9;
    font-family:Baskerville, serif;
    text-transform:uppercase;
    left:0;
    right:0;
    text-align:center; /* centers nav bar */
    font-size:0; /* this takes away the default white spaces at the end of the <li>...have to resize font in li */
}

li {
    display:inline-block; /* makes nav go horizontal */
    font-size:14px; /* size of navbar text ... !important has to be in px because ul has font size = 0*/
}

li:hover {
    background:#000000; /* changes tab to black */
    color:#E09635; /* changes text to color */
    transition-duration: 0.3s; /* response time on navbar icon hover */
    transition-timing-function: ease;
    transition-delay: 0; /* zero delay to have transtion occur */
}

a {
    text-decoration:none; /*removes underline from a links */
    color:inherit; /* takes color from parent, in this case, li */
    display:block; /* makes the a box relatable to li */
    padding: 10px;  /* creates padding around a box for navbar and adds to clickable region because of anchor */
}

.activemenutab { /* this is the class used to make the one you are on highlighted ... needs to be swithched in html */
    background-color:#EDEDED;
    color:#E09635;
}

/* ---------- body below */

h3 {
    text-align:center;
    font-family:Baskerville, serif;
    text-transform:uppercase;
    font-size:30px;
    font-weight: 600;
    letter-spacing: 0.2em;
    word-spacing: 0.5em;
}

/* ---------- footer below */

footer {
    text-align:center;
    background-color:#000000;
    color:#EDEDED;
    left:0;
    right:0;
    bottom:0;
    margin:0;
    position:absolute;
    padding:.2em;
}

结论！：如何让我的标题延伸到浏览器的边缘（在顶部，左侧和右侧），类似于我的FOOTER，没有使用绝对定位。非常感谢。

Answer 1

body元素有一个默认的边距，你需要摆脱：

body {
    margin:0;
}

<强> jsFiddle example

Answer 2

你需要重置你的CSS：像：

/*
*  html5 doctor css reset | http://html5doctor.com/html-5-reset-stylesheet
*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}

CSS重置：http://cssreset.com/scripts/html5-doctor-css-reset-stylesheet/

许多CSS重置元素无法使用，但重置所有内容都很好。

<强> Demo JSFiddle

标题未延伸到浏览器的顶部/侧边。不能使用绝对位置

2 个答案: