Question

我正在构建一个相当简单的网站，我需要做出一些响应。

现在，当我调整浏览器大小时，导航菜单会重叠Logo标题，这会变得非常混乱。

HTML：

 <div class='header'>
    <header>
      <h1><a href="/">Prince Innocence</a></h1>
    </header>
    <nav class='main'>
      <ul>
        <li><a href="/music/">Music</a></li>
        <li><a href="http://princeinnocence.bigcartel.com">Store</a></li>
        <li><a href="/shows/">Shows</a></li>
        <li><a href="/videos/">Videos</a></li>
        <li><a href="mailto:princeinnocence@gmail.com">Contact</a></li>
      </ul>
      <ul class='social'>
        <li>
          <a href='http://www.youtube.com/princeinnocenceband' target=_"blank">
            <span class='icon-youtube'></span>
            <span class='hidden'>Youtube</span>
          </a>
        </li>
        <li>
          <a href='http://www.instagram.com/Prince Innocence' target=_"blank">
            <span class='icon-instagram'></span>
            <span class='hidden'>Instagram</span>
          </a>
        </li>
        <li>
          <a href='http://Prince Innocence.tumblr.com' target=_"blank">
            <span class='icon-tumblr'></span>
            <span class='hidden'>Tumblr</span>
          </a>
        </li>
        <li class='soundcloud'>
          <a href='http://www.soundcloud.com/Prince Innocence' target=_"blank">
            <span class='icon-soundcloud'></span>
            <span class='hidden'>Soundcloud</span>
          </a>
        </li>
        <li>
          <a href='http://www.twitter.com/Prince Innocence' target=_"blank">
            <span class='icon-twitter'></span>
            <span class='hidden'>Twitter</span>
          </a>
        </li>
        <li>
          <a href='http://www.facebook.com/Prince Innocence' target=_"blank">
            <span class='icon-facebook'></span>
            <span class='hidden'>Facebook</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>

和CSS：

.header {
width: 100%;
background: rgba(30, 30, 30, 0.6);
padding: 25px 0 20px 25px
}

.header h1 {
padding-right: 30px;
color: white;
font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
font-style: italic;
text-transform: uppercase;
color: #cccccc;
font-size: 300%
}

.header nav {
position: relative;
text-align: right;
margin-top: -50px;
margin-right: 30px
}

.header a, .header a:visited, header a:active {
color: #cccccc;
text-decoration: none
}

.header nav li {
display: inline;
padding: 0 5px 0 0
}

.header nav li a {
text-decoration: none;
font-size: 100%;
text-transform: uppercase;
color: #cccccc;
-o-transition: 1s;
-ms-transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
transition: 1s
}

有什么想法？谢谢！

Answer 1

您已在nav

中的.header nav元素上声明了一个负余量

.header nav {
    position: relative;
    text-align: right;
    margin-top: -50px; /* <-- THIS */
    margin-right: 30px
}

如果你拿走它或将其改为接近0的东西你应该有更少的重叠

Answer 2

您是否尝试在徽标标题的CSS中添加clear:both;，我想这是<h1>元素？

调整大小时使Nav低于H1

2 个答案: