Question

所以在我的测试页面上我遇到了导航栏的这个问题。下面出现了空白，它是由隐藏按钮和下拉菜单引起的。

在完整的桌面视图中，右上角你会看到Select Province / Ontario和Francais，当网站进入移动视图时，我隐藏了这两个，然后在导航栏中，我有两个按钮，出现一个下拉菜单

我尝试过使用visbility：隐藏并且当前正在使用display：none;，并尝试过将两者结合使用，但没有运气。

这很奇怪，如果我缩小屏幕，它看起来只是在最大化之后有一个隐藏的li。

但如果缩小并打开切换菜单，然后在不关闭它的情况下最大化，它会向您显示其下方的两个额外空格。如果我删除了Francais和省部分，它将完美，但不幸的是我需要它们大声笑。

这是html：

<nav>
  <div>
   <ul class="nav navbar-nav">
    <li class="left"><a href="http://convio.cancer.ca/site/TR?fr_id=[[S80:trID]]" class="home-btn" title="Home">Home</a></li>
    <li class="left"><a href="TR/Events?pg=informational&amp;type=fr_informational&amp;sid=9700&amp;fr_id=[[S80:trID]]" class="tours-btn" title="Register">Register</a></li>
    <li class="left"><a href="TR/Events?pg=pfind&amp;fr_id=[[S80:trID]]" class="about-btn" title="Search participants or teams">Find a Fundraiser</a></li>
    <li class="left"><a href="TR/Events/General?pg=informational&fr_id=21282&type=fr_informational&sid=6583" class="learn-btn" title="Learn more">Learn More</a></li>
    <li class="right"><a href="TR/Events?pg=pfind&amp;fr_id=[[S80:trID]]" class="donater-btn hvr-buzz-out" title="Donate to team or participant">DONATE</a></li>

   <li class="dropdown">
     <a class="dropdown-toggle provinces-btn" data-toggle="dropdown">Select Province<span class="caret"></span></a> 
    <ul class="dropdown-menu">
         <li><a href="#">Alberta</a></li>
         <li><a href="#">British Columbia</a></li>
         <li><a href="#">Ontario</a></li>
         <li><a href="#">Nunavut</a></li>
         <li><a href="#">Manitoba</a></li>
    </ul>  
   </li>

   <li class="right"><a href="frenchurl" class="french-btn" title="French">Français</a></li>

  </ul>
 </div>
</nav>

以下是这两个额外<li>的css：

/*Mobile provinces Selector*/
@media screen and (min-width: 769px){
 .provinces-btn{
  display: none;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
 }
}

@media screen and (max-width: 768px) {
.provinces-btn {

    width: 100%;
    margin-top: 16px;
    color: #FFFFFF !important;
    background-color: #0066CC;
    margin-left: 0px;


}

    .provinces-btn:hover, .provinces-btnActive {
        color: #FFEE00 !important;
        background: #1975D1;
        font-weight: 900;
    }

}

@media screen and (max-width: 604px) {
.provinces-btn {

    width: 100%;
    margin-top: 16px;
    color: #FFFFFF !important;
    background-color: #0066CC;
    margin-left: 15px;

   }

       .provinces-btn:hover, .provinces-btnActive {
        color: #FFEE00 !important;
        background: #1975D1;
        font-weight: 900;
    }

 }



/*French BTN*/
@media screen and (min-width: 769px){
 .french-btn{
  display: none;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
 }
}

@media screen and (max-width: 768px) {
.french-btn {

    width: 100%;
    margin-top: 16px;
    color: #FFFFFF !important;
    background-color: #0066CC;
    margin-left: 0px;


}

    .french-btn:hover, .french-btnActive {
        color: #FFEE00 !important;
        background: #1975D1;
        font-weight: 900;
    }

}

@media screen and (max-width: 604px) {
.french-btn {

    width: 100%;
    margin-top: 16px;
    color: #FFFFFF !important;
    background-color: #0066CC;
    margin-left: 15px;

   }

       .french-btn:hover, .french-btnActive {
        color: #FFEE00 !important;
        background: #1975D1;
        font-weight: 900;
    }

 }

谢谢你的时间！

Answer 1

问题正在发生，因为父容器没有position: relative，因此子容器正在使用页面的整个宽度而不是被包含和表现。为了帮助你理解发生了什么，我在容器上创建了这个JSFiddle一个亲戚，一个没有它的亲戚。

#logo-login-container {
    height: 135px;
    margin: 0 auto;
    max-width: 970px;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    position: relative;
}


.styled-select {
    background: rgba(0, 0, 0, 0) url("http://convio.cancer.ca/mResponsive/images/icons/dropdown_blue_icon.png") no-repeat scroll right center;
    border: 1px solid #e9e9e9;
    height: 35px;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 100px;
    width: 185px;
}

您需要将Français位置更改为right: 210px;，因为这是在CSS样式表之外设置的。同样在将来，我建议您研究css浮点数，因为它们更容易管理。

Answer 2

只需使用display: none !important删除它们即可覆盖display: block

无法从导航栏

2 个答案: