Question

我正在尝试创建一个响应式导航栏，但是当它调整大小时会发生这种情况：

我将如何制作它，以便导航栏不执行此文本剪辑操作？（随着它越来越近，它变得更糟）

这是我的代码：

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移除宽度并为其添加填充

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 2

是这样的吗？

＆＃13;

#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;

＆＃13;

<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>

＆＃13;

Answer 3

最佳结果总是使用Bootstrap（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>

响应式Nav Bar Bug

3 个答案: