Question

我知道我正在为我的标题填充填充，这就是为什么我的nav_bar类不会让我的边框顶部延伸到我的页面。任何人都知道如何修复我的标题上删除20px填充的缺点？我在建筑师世界玩得更多，所以我的HTML和CSS生锈了，但我认为边框会根据盒子模型延伸过填充？

以下是该网站的链接。

http://www.dsu-class.com/zito82/lab03/ HTML

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Zito - Lab 3</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
</head>
<body>
    <header>
    <img src="images/SAS.png" alt="Solution Architect Scenarios">
        <hgroup id="headerGroup">
            <h1>Solution Architect Scenarios</h1>
            <h2>Elite Training for Elite Architects</h2>
        </hgroup>
        <nav id="nav_bar">
            <ul>
                <li><a href="index.html" class="current">Home</a></li>
                <li><a href="aboutPhil.html">About Phil</a></li>
                <li><a href="premiumContent.html">Premium Content</a></li>
                <li><a href="contactMe.html">Contact Me</a> </li>
            </ul>
        </nav>
    </header>
    <aside>
        <ul>
            <li><a href="Blog Articles">Blog Articles</a></li>
            <li> <a href="Videos">Training videos</a></li>
            <li> <a href="Portfolio">My Portfolio</a></li>
            <li> <a href="Sites I Like">Sites I Like</a></li>
        </ul>
    </aside>
    <section>
    <h2> Welcome to the Site</h2>
        <p>On a daily basis I deal with hundreds of different technologies. These technologies span the stack from
        Layer 1 to Layer 7. It was this Jack of All Trades (JOAT), experience that I saw so rarely in the business world
        that would lead me to creating this site. As architects, we need to consider all the factors that influence our
        design. Often time's we design in a background. This site seeks to open up those other areas in which you may not
        dwell. The end goal is for you to be able to grow in your awareness of technologies and abilities as an architect.</p>
        <h3> Consulting </h3>
        <p> I offer my skills around technology to help enterprises and business owners with <strong>ALL</strong> aspects
        of their business. I like to tell people that I cover all the way from Layer 1 to Layer 7. I can assist you in your
        design and architecture needs. I have a focus on large scale enterprise design and cyber-security.</p>
    </section>
    <footer>
        <p>&copy; Copyright 2015 Phil Zito</p>
    </footer>
</body>
</html>

CSS：

article, aside, figure, footer, header, nav, section {
display: block;
}

body {
    font-family: sans-serif;
    width: 960px;
    background-color: white;
    border-color: black;
    -moz-box-shadow: 0 0 0 20px black;
    -webkit-box-shadow: 0 0 0 20px black;
    box-shadow: 0 0 0 20px black;
    margin: 1em auto;
}

header , section , footer {
    padding: 20px;
}

header {
    background-color: white;
    border-bottom: black solid 5px ;
}

img {
    float: left;
    margin: 1em;

}

aside {
    float: left;
    width: 170px;
    padding: 20px;
}

section {
 float: right;
 width: 690px;
}



footer {
    clear: both;
    font-size: .9em;
    text-align: center;
    background-color: white;
    border-top: black solid 5px;
}

header h1 {
    text-indent: 20px;
}

header h2 {
    text-indent: 20px;
}


section h2:first-child:first-letter { font-size: 2em;}

aside a:link,aside a:visited {font-weight: bold; color: black;}

aside a:hover, aside a:focus {color: green;}

aside li {
    list-style: none;
}

aside a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 1.5em;
    border: 3px solid black;
    margin: 5px 0 5px 0;
    text-decoration: none;
    background-color: grey;
    font-size: 1.1em;
    padding-left: 5px;
}
section.h2 {
    margin-top: 0;
}

#nav_bar {
    border-top: 2px solid black;
    padding: 5px 0 5px 0;
}

#nav_bar ul {
    text-align: center;
}

#nav_bar li {
    display: inline;
}

#nav_bar a {
    padding: 0 1em 1em 0;
    color: black;
    font-weight: bold;
    text-decoration: none;
}

#nav_bar a:hover, #nav_bar a:focus {
    text-decoration: underline;
}

#nav_bar a.current {
    color: green;
}

Answer 1

<强>解决方案

如果您将<nav id="nav_bar"> div移到<header>标记之外和之下，然后将border-bottom属性从header移到#nav_bar，那么您就是＆＃39 ;完全可以。

的CSS

header {
    background-color: white;
}

#nav_bar {
    border-bottom: 5px solid black;
    border-top: 2px solid black;
    padding: 5px 0;
}

html的

<header>
    <img alt="Solution Architect Scenarios" src="images/SAS.png">
    <hgroup id="headerGroup">
        <h1>Solution Architect Scenarios</h1>
        <h2>Elite Training for Elite Architects</h2>
    </hgroup>
</header>

<nav id="nav_bar">
    <ul>
        <li><a class="current" href="index.html">Home</a></li>
        <li><a href="aboutPhil.html">About Phil</a></li>
        <li><a href="premiumContent.html">Premium Content</a></li>
        <li><a href="contactMe.html">Contact Me</a> </li>
    </ul>
</nav>

如何扩展我的nav_bar类的border-top

1 个答案: