Question

我的网站的导航菜单中有3个项目，我已关闭了响应式菜单切换，并希望它位于tablet和mobile中的徽标下方。但是，我无法做到这一点。我只希望navbar删除一行并保留相同外观。

我已将block放在全尺寸和480屏幕的两个.srt-menu类中，但是没有任何效果。还声明每个菜单项的宽度，或者使用float删除所有块显示。

任何帮助将不胜感激。

这是HTML代码：

<header class="wrapper clearfix">

    <div id="banner">        
        <div id="logo"><a href="index.html"><img src="images/header.png" alt="logo"></a></div> 
    </div>

    <!-- main navigation -->
    <nav id="topnav" role="navigation">
      <ul class="srt-menu" id="menu-main-navigation">          
          <li class="about"><a href="about.html">About</a></li>
          <li class="gallery"><a href="gallery.html">Gallery</a></li>
          <li class="contact"><a href="contact.html">Contact</a></li>   
      </ul>     
    </nav><!-- end main navigation -->

</header>

#menu-main-navigation{
  display:block;
}

.srt-menu, .srt-menu * {
  margin:           0;
  padding:      0;
  list-style:       none;
}

.srt-menu ul {
  position:     absolute;
  display:none;
  width: 12em; /* left offset of submenus need to match (see below) 
  */
}

.srt-menu ul li {
  width: 20%;
}

.srt-menu li:hover {
  visibility:       inherit; /* fixes IE7 'sticky bug' */
}

.srt-menu li {
  float:            left;
  position:     relative;
  margin-left:1px;
  max-width: 100px;
}

.srt-menu li li {
  margin-left:0px;
}

.srt-menu a {
  display:      block;
  position:     relative;
}

#topnav, .srt-menu {
  float:right;
  margin: 1.2em 0 0 0;
}

.srt-menu a {
  text-decoration:none;
  color: #000000;
}

.srt-menu li a {
  background:#fff;
  margin:0; 
  padding:0px 25px;
  height:45px;
  max-width: 100px;
}

.srt-menu a, .srt-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
  color: #000000;   
}

/*LARGER MOBILE DEVICES
This is for mobile devices with a bit larger screens.*/
@media only screen and (min-width: 480px) {
  #banner{
    float:left;
    text-align:left;
    margin-bottom:20px;/*this depends on the height of the logo*/
  }

  .topnav {
    float:left; 
    margin: .2em;
  }

  .srt-menu, ul.srt-menu {
    display: block !important;
  }
}

Answer 1

已修复！我想我需要写出问题了。

我用不同的彩色按钮和悬停效果制作了一个导航栏，但是我没有为它们指定“行内阻止”。在全角模式下，导航栏从父div继承了边距和宽度。

基本上，将一个块更改为行内块，并调整一些填充和边距。

.srt-menu li.about, .srt-menu li.gallery, .srt-menu li.contact {
display:inline-block;
margin:1px 0; 
padding:10px;
text-decoration:none;
font-size: 1.4em;

}

响应式导航栏不会“拉伸”

1 个答案: