Question

我尝试添加导航栏，但是只要我添加导航栏，它就会立即将我的H1元素移到右侧或左侧，具体取决于我将导航栏放在DOM树中的位置。如果我向H1添加填充以修复居中问题，那么随着浏览器变小，它会破坏我的所有响应式设计。当然他们是一个解决方案？

<body>
<div id="menu">
  <div id="name">
    <h2 class="myname">Lee Howard</h2>
  </div>
</div>
<header id="header">
  <nav class="main-nav">
       <ul>
         <li><a href="#about">Home</a></li>
         <li><a href="#contact-info">Contact</a></li>
       </ul>
 </nav>
  <h1 class="title">Front end developer.
    <br>
    <span>WORKING HARD TO BECOME GREAT</span>
    </h1>
</header>

 #header {
 display: table;
 top: 0;
 left: 0;
 height: 960px;
 width: 100%;
 background: url(../img/header.jpg)
          no-repeat center;
 background-size: cover;
 box-shadow: 0px 5px 0px 0px;
}


#header h1 {
font-family: 'Raleway', sans-serif, font-weight: 400;
display: table-cell;
vertical-align: middle;
text-align: center;
font-weight: 700;
line-height: 0.8em;
font-size: 4.25em;
}

#header h1 span {
font-family: 'Raleway', sans-serif;
font-weight: 800;
color: #363636;
font-size: 0.30em;
}


#name {
position: absolute;
text-align: center;
margin-right: -80px;
right: 51%;
}


/****************************
 NAVIGATION
******************************/

.main-nav {
list-style: none;
margin: 0;
padding: 0;
}

.main-nav ul {
 margin: 0;
 }

.main-nav li {
 float: left;
 padding: 0 20px;
}

Answer 1

因为你的标题有

而发生了这种情况

display:table

和h1有

display:table-cell

position:absolute上#name也删除了元素的宽度。

我做了一些修正，如果在这里工作的话。 https://jsfiddle.net/t3s2ht8n/

为什么当我添加我的NAV栏时它会移动我的H1元素？

1 个答案: