Question

我刚刚开始学习HTML和CSS，因此我不太了解。我检查了其他问题，并尝试了给出的答案，但没有一个对我有用。我希望我的标题和导航栏位于同一个边框底部。我尝试了很多方法，我不知道下一步该做什么。

这是我的HTML;

<body>
    <div id="main">
    <nav id="nav01"></nav>
    <h1 class="padding">hardalname</h1>
    <p>Lorem ipsum dolor sit amet.</p>
    <footer id="foot01"></footer>
    </div>
<script src="script.js"></script>
</body>

这是我的CSS;

body {
    font-family: "Courier New", Courier, monospace;
    font-size: 16px;
    background-color: white;
    color: #696969;
    padding: 3px;
}

#main {
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: white;
    border-radius: 0 0 5px 5px;
}

h1 {
    font-family: "Courier New", Courier, monospace;
    border-bottom: 1px double darkred;
    color: darkred;
    font-size: 30px;
}


h1.padding {
    padding-bottom: 5px;
}


ul#menu {
    padding: 0;
    margin-bottom: 11px;

}

ul#menu li {
    display: inline;
    margin-right: 3px;

}

ul#menu li a {
    background-color: #ffffff;
    padding: 10px 20px;
    text-decoration: none;
    color: #696969;
    border-radius; 4px 4px 0 0;

}

ul#menu li a:hover {
    color: white;
    background-color: silver;
}

这是我正在使用的导航栏;

document.getElementById("nav01").innerHTML =
"<ul id='menu'>" +
"<li><a href='index.html'>hardalname</a></li>" +
"<li><a href='about.html'>hakkımda</a></li>" +
"</ul>";

body {
  font-family: "Courier New", Courier, monospace;
  font-size: 16px;
  background-color: white;
  color: #696969;
  padding: 3px;
}
#main {
  padding: 5px;
  padding-left: 15px;
  padding-right: 15px;
  background-color: white;
  border-radius: 0 0 5px 5px;
}
h1 {
  font-family: "Courier New", Courier, monospace;
  border-bottom: 1px double darkred;
  color: darkred;
  font-size: 30px;
}
h1.padding {
  padding-bottom: 5px;
}
ul#menu {
  padding: 0;
  margin-bottom: 11px;
}
ul#menu li {
  display: inline;
  margin-right: 3px;
}
ul#menu li a {
  background-color: #ffffff;
  padding: 10px 20px;
  text-decoration: none;
  color: #696969;
  border-radius;
  4px 4px 0 0;
}
ul#menu li a:hover {
  color: white;
  background-color: silver;
}

<body>
  <div id="main">
    <nav id="nav01">
      <ul id='menu'>
        <li><a href='index.html'>hardalname</a>
        </li>
        <li><a href='about.html'>hakkımda</a>
        </li>
      </ul>
    </nav>
    <h1 class="padding">hardalname</h1>
    <p>Lorem ipsum dolor sit amet.</p>
    <footer id="foot01"></footer>
  </div>

Answer 1

添加一个为导航添加边框的规则：

#nav01{
    border-bottom: 1px double darkred; 
}

jsFiddle

我希望我的标题和导航栏位于同一个边框底部

1 个答案: