css - 缩放后菜单链接从面板中跳出

Question

晚上好我的菜单链接有问题。当我在移动设备上看到它并将其缩放为文本时，链接只是从面板跳到下一行。( http://www.abclinuxu.cz/data/prilohy/0/6/214560-img_1705-3567267490611876903.PNG )我已经设置了位置固定等。我如何强制这个错误？谢谢指教!

HTML:

<div id="nabidka">

    <div id='cssmenu'>
    <ul>
       <li><a href='#about'>O nás</a></li>
       <li><a href='#cenik'>Ceník</a></li>
       <li><a href='#sluzby'>Služby</a></li>
       <li><a href='#kontakt'>Kontakt</a></li>
    </ul>
    </div>
    </div>

CSS:

#nabidka {

width:550px;
height: 90px;

margin-left: 1.5em;
  padding-top: 5px;
float:left;

}

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {

  list-style: none;
  line-height: 80px;

  margin: 0 auto;

}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  width: auto;

  line-height: 80px;
  height:90px;

}
#cssmenu > ul {

}
#cssmenu > ul > li {
  float: left;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu > ul > li > a {

  font-size: 20px;
  text-transform: ;
  text-decoration: none;
  color: white;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
  color: #f26c4f;
}
#sipka {
position: absolute;
left: -1000px;
}
#cssmenu #menu-indicator {
  position: absolute;
  bottom: 0;
  display: block;
  height: 0;
  width: 0;
  border: 7px solid transparent;
  border-bottom-color: white;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -ms-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}

Answer 1

我看不出它应该是什么样子。尝试分享指向您的 html 文件的链接。

但是，我认为问题在于您的 CSS。您正在使用 px 值与 em 的组合。尝试将 #cssmenu 的 line-height 放在 em 中，也许这就是问题所在。