Question

晚上好，我的菜单链接有问题。当我在移动设备上看到它并将其缩放为文本时，链接就会从pannel跳到下一行。（http://www.abclinuxu.cz/data/prilohy/0/6/214560-img_1705-3567267490611876903.PNG）我已经设置了固定位置等等。我怎么能强制这个bug呢？谢谢你的建议！

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相结合的组合。尝试将line-height #cssmenu放入em，也许这就是问题所在。

Answer 2

从快速查看代码开始，我认为问题与由于“float：left”而崩溃的元素有关。

使用.clearfix方法Clearfix snippet可以轻松解决此问题。您可以通过将.clearfix类放在父元素或浮动元素的任何父元素上来解决此问题。

另一个简单的解决方案，我不建议使用<!--

希望这有帮助。

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

2 个答案: