Question

我正在freecodecamp上做一个项目。我创建了一个导航栏和一个标题，我为它们都做了一个固定位置，但是现在导航栏与标题重叠了，我该如何解决呢？

<nav id="navbar">
<header class="headerOne">JS Documentation</header>
<ul class="navList">
<li><a href="#introduction">Introduction</a></li>

<li><a href="#what_you_should_already_know">What you should already 
know</a></li>

<li><a href="#javascript_and_java">JavaScript and Java</a></li>

<li><a href="#hello_world">Hello world</a></li>

<li><a href="#variables">Variables</a></li>

<li><a href="#declaring_variables">Declaring variables</a></li>

<li><a href="#variable_scope">Variable scope</a></li>

<li><a href="#refrence">Refrence</a></li>

</ul>
</nav>

<style>
.headerOne{
font-size: 30px;
font-weight: 900;
font-family:Georgia;
position: fixed;
}
.navList {
list-style: none;
padding:0;
margin:0;
position: fixed;
border-right: 2px solid gray;
height: 100%;
}
ul li a{
text-decoration:none;
font-family:Georgia;
display:block;
margin: px;
padding: 10px;
border-top:2px solid gray;
border-bottom:2px solid gray;
}
</style>

基本上试图使其看起来像这样-https://codepen.io/freeCodeCamp/full/NdrKKL

当前看起来像这样- https://codepen.io/chrisalta94/pen/ywZdww

Answer 1

尝试缩小HttpServletRequestWrapper的字体大小以在左侧菜单中进行修复。添加headerOne和navList的填充，边距和宽度，以获取顶部和左侧的间距。

main-doc

.headerOne {
    font-size: 24px;
    font-weight: 900;
    font-family: Georgia;
    position: fixed;
}

.navList {
    list-style: none;
    padding: 30px 0 0;
    margin: 0;
    position: fixed;
    border-right: 2px solid gray;
    height: 100%;
    width:240px;
}

ul li a {
    text-decoration: none;
    font-family: Georgia;
    display: block;
    margin: px;
    padding: 10px;
    border-bottom: 2px solid gray;
}

#main-doc {
    margin-left: 250px;
    font-family: Georgia;
    line-height: 1.6;
}

Answer 2

您应该仅给nav元素一个position: fixed;，而不是其中的标题和navlist。而且重要的是设置宽度（以％或rem或px为单位），并将padding-left:分配给右侧div（主div）

这是我对您的代码所做的修改：

/* Give the nav a fixed position and remove other fixed positions */
nav#navbar {
  width: 20%;
  position: fixed;
}

.headerOne{
  /* make sure the both elements have a 100% width */
  width: 100%;
  font-size: 25px;
  font-weight: 900;
  font-family:Georgia;
}
.navList {
  width: 100%;
  list-style: none;
  padding:0;
  margin:0;
  top: 66px;
  border-right: 2px solid gray;
  height: 100%;
}
ul li a{
  text-decoration:none;
  font-family:Georgia;
  display:block;
  margin: px;
  padding: 10px;
  border-top:2px solid gray;
}
a:link {
  color: black;
}
a:visited {
  color: black;
}
ul li a:hover{
  background-color:#d3d3d3;
}
#main-doc {
  /* Give your main div padding-left of the width of the left nav, or little more */
  width: 100%;
  padding-left:22%;
  font-family:Georgia;
  line-height: 1.6;
}
@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}

当然还有其他方法。但是，它现在可以完成工作。希望能有所帮助。

如何修复导航栏和第一个标题的重叠？

2 个答案: