Question

我一直在为一家公司开发一个Web开发项目，我决定在导航栏中使用FlexNav JQuery插件：http://jasonweaver.name/lab/flexiblenavigation/但是，在提供的示例中，他们只有5个列表元素但我会喜欢添加更多。当我尝试实现这一点时，似乎下一个元素填充到下一行：http://www.kappaskins.co/。我不知道究竟是什么导致了这个问题，无论是HTML还是CSS？我不相信这不应该是一个表问题，因为无论你输入什么html，似乎Javascript或CSS会自动在5处断行。

我认为关键问题可能在于以下几点：

 .flexnav {
   -webkit-transition: none;
   -moz-transition: none;
   -ms-transition: none;
   transition: none;
   -webkit-transform-style: preserve-3d;
   overflow: hidden;
   margin: 10 auto;
   width: 70%;
   max-height: 0;
 }

 .flexnav.opacity {
   opacity: 0;
 }

 .flexnav.flexnav-show {
   max-height: 2000px;
   opacity: 1;
   -webkit-transition: all .5s ease-in-out;
   -moz-transition: all .5s ease-in-out;
   -ms-transition: all .5s ease-in-out;
   transition: all .5s ease-in-out;
 }

 .flexnav.one-page {
   position: relative;
   top: 50px;
   right: 5%;
   max-width: 200px;
 }

 .flexnav li {
   font-size: 100%;
   position: relative;
 }

这是我的源代码： http://codepen.io/xjokes_henry/pen/grOwBe

Answer 1

您需要在此处将CSS元素的宽度更改为16（第182行）：

.flexnav li {
  position: relative;
  list-style: none;
  float: left;
  display: block;
  background-color: #a6a6a2;
  overflow: visible;
  width: 16%;// 20 changed to 16 to fit one additional element
}

将来，尝试使用chrome / ff中的调试工具（点击f12）来编辑/检查CSS或HTML

导航栏不会添加列表元素而不会断行

1 个答案: