響應導航欄的Bug

Question

我試圖做出響應的導航欄，但是當它會調整發生這種情況：

Image

我怎麼會去使它所以導航欄不這樣做文剪報的東西？ （因爲它得到更加緊密事情變得更糟糕）

這裏是我的代碼：

HTML

<div id="menuContainer"> 
    <a href="index.html"><img id="logoimg" src="imgs/logo.png" height="70px" /></a> 
    <ul class="menul"> 
      <li class="menuli"><a target="_blank" href="http://eastofseattle.bpt.me/">Buy Tickets</a></li> 
      <li class="menuli"><a href="#">About</a></li> 
      <li class="menuli"><a href="sponsor.html">Sponsors</a></li> 
      <li class="menuli"><a href="index.html">Home</a></li> 
    </ul> 
</div> 

CSS：

#menuContainer { 
    background-color: white; 
    margin: 2vw; 
    height: 10vh; 
    position: relative; 
} 

.menul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 

.menuli { 
    display:inline-block; 
    float: right; 
} 

.menuli a { 

    font-size: 2.7vh; 
    width: 9vw; 
    height: 10vh; 
    text-align: center; 
    font-family: "Lato", Helvetica, Arial, sans-serif; 
    color: black; 
    text-decoration: none; 
    display: inline-block; 
    white-space: nowrap; 
    overflow: hidden; 
    line-height: 10vh; 

} 

.menuli a:hover { 
    background-color: #ff3333; 
} 

#logoimg { 
    float: left; 
    height: 9.23vh; 
    display: inline; 
    margin-right: 20px; 
    vertical-align: middle; 
    position:absolute; 
    top:0; 
    bottom:0; 
    margin:auto; 
} 

Answer 1

剛從.menuli a除去寬度和填充添加到它

#menuContainer { 
 
    background-color: white; 
 
    margin: 2vw; 
 
    height: 10vh; 
 
    position: relative; 
 
} 
 

 
.menul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 

 
.menuli { 
 
    display:inline-block; 
 
    float: right; 
 
} 
 

 
.menuli a { 
 
    padding: 0px 10px; 
 
    font-size: 2.7vh; 
 
    height: 10vh; 
 
    text-align: center; 
 
    font-family: "Lato", Helvetica, Arial, sans-serif; 
 
    color: black; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    line-height: 10vh; 
 

 
} 
 

 
.menuli a:hover { 
 
    background-color: #ff3333; 
 
} 
 

 
#logoimg { 
 
    float: left; 
 
    height: 9.23vh; 
 
    display: inline; 
 
    margin-right: 20px; 
 
    vertical-align: middle; 
 
    position:absolute; 
 
    top:0; 
 
    bottom:0; 
 
    margin:auto; 
 
}

<div id="menuContainer"> 
 
    <a href="index.html"><img id="logoimg" src="imgs/logo.png" height="70px" /></a> 
 
    <ul class="menul"> 
 
      <li class="menuli"><a target="_blank" href="http://eastofseattle.bpt.me/">Buy Tickets</a></li> 
 
      <li class="menuli"><a href="#">About</a></li> 
 
      <li class="menuli"><a href="sponsor.html">Sponsors</a></li> 
 
      <li class="menuli"><a href="index.html">Home</a></li> 
 
    </ul> 
 
</div>

Answer 2

是不是這樣呢？

#menuContainer { 
 
    background-color: white; 
 
    margin: 2vw; 
 
    height: 10vh; 
 
    position: relative; 
 
    display:flex; 
 
     flex-direction:row; 
 
     flex-wrap:wrap; 
 
     justify-content: space-between; 
 
} 
 

 
.menul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    /* overflow: hidden;*/ 
 
     display:flex; 
 
     flex-direction:row; 
 
     justify-content: space-around; 
 
     width:60%; 
 
} 
 

 
.menuli { 
 
    display:inline-block; 
 
    float: right; 
 
} 
 

 
.menuli a { 
 

 
    font-size: 2.7vh; 
 
    width: 9vw; 
 
    height: 10vh; 
 
    text-align: center; 
 
    font-family: "Lato", Helvetica, Arial, sans-serif; 
 
    color: black; 
 
    text-decoration: none; 
 
    /*display: inline-block;*/ 
 
    white-space: nowrap; 
 
    /*overflow: hidden;*/ 
 
    line-height: 10vh; 
 

 
} 
 

 
.menuli a:hover { 
 
    background-color: #ff3333; 
 
} 
 

 
#logoimg { 
 
    float: left; 
 
    height: 9.23vh; 
 
    display: inline; 
 
    margin-right: 20px; 
 
    vertical-align: middle; 
 
    position:absolute; 
 
    top:0; 
 
    bottom:0; 
 
    margin:auto;

<div id="menuContainer"> 
 
    <a href="index.html"><img id="logoimg" src="imgs/logo.png" height="70px" /></a> 
 
    <ul class="menul"> 
 
      <li class="menuli"><a target="_blank" href="http://eastofseattle.bpt.me/">Buy Tickets</a></li> 
 
      <li class="menuli"><a href="#">About</a></li> 
 
      <li class="menuli"><a href="sponsor.html">Sponsors</a></li> 
 
      <li class="menuli"><a href="index.html">Home</a></li> 
 
    </ul> 
 
</div>

Answer 3

爲達到最佳效果始終使用自舉（100％響應）

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <title>Bootstrap Case</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    </head> 
    <body> 

    <nav class="navbar navbar-inverse"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span>       
      </button> 
      <a href="index.html"><img id="logoimg" src="imgs/logo.png" height="70px" /></a> 
     </div> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li class="dropdown"> 
       <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
       <li><a target="_blank" href="http://eastofseattle.bpt.me/">Buy Tickets</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="sponsor.html">Sponsors</a></li> 
       </ul> 
      </li> 
      <li><a href="index.html">Home</a></li> 
      </ul> 

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

    </body> 
    </html>