Html 响应导航条错误_Html_Css_Responsive Design

Html 响应导航条错误

html css responsive-design

Html 响应导航条错误,html,css,responsive-design,Html,Css,Responsive Design,我试图制作一个响应导航条，但是当它调整大小时，会发生以下情况：我该怎么做才能让导航栏不做这种文本剪辑的事情呢？（越靠越近，情况就越糟）这是我的密码： HTML <div id="menuContainer"> <a href="index.html"><img id="logoimg" src="imgs/logo.png" height="70px" /></a> <ul class="menul">

我试图制作一个响应导航条，但是当它调整大小时，会发生以下情况：

我该怎么做才能让导航栏不做这种文本剪辑的事情呢？（越靠越近，情况就越糟）

这是我的密码：

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>

是这样的吗

#菜单容器{
背景色：白色；
利润率：2vw；
高度：10vh；
位置：相对位置；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
证明内容：之间的空间；
}
梅努尔先生{
列表样式类型：无；
保证金：0；
填充：0；
/*溢出：隐藏*/
显示器：flex；
弯曲方向：行；
证明内容：周围的空间；
宽度：60%；
}
梅努利先生{
显示：内联块；
浮动：对；
}
梅努利先生{
字号：2.7vh；
宽度：9vw；
高度：10vh；
文本对齐：居中；
字体系列：“Lato”，Helvetica，Arial，无衬线；
颜色：黑色；
文字装饰：无；
/*显示：内联块*/
空白：nowrap；
/*溢出：隐藏*/
线路高度：10vh；
}
梅努利a：悬停{
背景色：#ff3333；
} 
#标识{
浮动：左；
高度：9.23vh；
显示：内联；
右边距：20px；
垂直对齐：中间对齐；
位置：绝对位置；
排名：0；
底部：0；
页边距：自动；

是这样的吗

#菜单容器{
背景色：白色；
利润率：2vw；
高度：10vh；
位置：相对位置；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
证明内容：之间的空间；
}
梅努尔先生{
列表样式类型：无；
保证金：0；
填充：0；
/*溢出：隐藏*/
显示器：flex；
弯曲方向：行；
证明内容：周围的空间；
宽度：60%；
}
梅努利先生{
显示：内联块；
浮动：对；
}
梅努利先生{
字号：2.7vh；
宽度：9vw；
高度：10vh；
文本对齐：居中；
字体系列：“Lato”，Helvetica，Arial，无衬线；
颜色：黑色；
文字装饰：无；
/*显示：内联块*/
空白：nowrap；
/*溢出：隐藏*/
线路高度：10vh；
}
梅努利a：悬停{
背景色：#ff3333；
} 
#标识{
浮动：左；
高度：9.23vh；
显示：内联；
右边距：20px；
垂直对齐：中间对齐；
位置：绝对位置；
排名：0；
底部：0；
页边距：自动；

只需删除

.menulia

中的宽度，然后添加填充

#菜单容器{
背景色：白色；
利润率：2vw；
高度：10vh；
位置：相对位置；
}
梅努尔先生{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
}
梅努利先生{
显示：内联块；
浮动：对；
}
梅努利先生{
填充：0px 10px；
字号：2.7vh；
高度：10vh；
文本对齐：居中；
字体系列：“Lato”，Helvetica，Arial，无衬线；
颜色：黑色；
文字装饰：无；
显示：内联块；
空白：nowrap；
溢出：隐藏；
线路高度：10vh；
}
梅努利a：悬停{
背景色：#ff3333；
} 
#标识{
浮动：左；
高度：9.23vh；
显示：内联；
右边距：20px；
垂直对齐：中间对齐；
位置：绝对位置；
排名：0；
底部：0；
保证金：自动；
}

只需删除

.menulia

中的宽度，然后添加填充

#菜单容器{
背景色：白色；
利润率：2vw；
高度：10vh；
位置：相对位置；
}
梅努尔先生{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
}
梅努利先生{
显示：内联块；
浮动：对；
}
梅努利先生{
填充：0px 10px；
字号：2.7vh；
高度：10vh；
文本对齐：居中；
字体系列：“Lato”，Helvetica，Arial，无衬线；
颜色：黑色；
文字装饰：无；
显示：内联块；
空白：nowrap；
溢出：隐藏；
线路高度：10vh；
}
梅努利a：悬停{
背景色：#ff3333；
} 
#标识{
浮动：左；
高度：9.23vh；
显示：内联；
右边距：20px；
垂直对齐：中间对齐；
位置：绝对位置；
排名：0；
底部：0；
保证金：自动；
}

为获得最佳效果，请始终使用引导（100%响应）


引导盒

为获得最佳效果，请始终使用引导（100%响应）


引导盒


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


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