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

【问题标题】：Responsive navbar will not "stretch"响应式导航栏不会“拉伸”
【发布时间】：2018-08-26 17:46:21
【问题描述】：

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

我已将block 放在.srt-menu 全尺寸和480 屏幕的两个类上，但没有任何效果。还为每个菜单项声明了一个宽度，或者删除所有块显示并使用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;
  }
}

【问题讨论】：

你还能附上图片吗？
照片已添加到帖子中。
您可以简单地使用media-queries来实现这一点。

标签： html css responsive

【解决方案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;

}

【讨论】：