Superfish 导航栏中心适合宽度

Question

我正在尝试从 Superfish 自定义导航栏，以便它在屏幕中居中并拉伸到 100% 的宽度。但我所做的每一次尝试都导致 li 元素拉伸以适应 100% 的屏幕。

这是jsfiddle上的代码

代码如下

<nav>
  <ul class="sf-menu">
    <li class="current"><a href="index.html">Home</a></li>
    <li><a href="aboutus.html">About Us</a></li>
    <li><a href="pulseone.html">Examples</a></li>
    <li><a href="news.html">News</a></li>
    <li><a href="contactus.html">Contact Us</a></li>
  </ul>
</nav>

superfish.css

.sf-menu, .sf-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sf-menu {
  position: relative;
  margin-bottom: 33px;
  float: left;
}
.sf-menu > li {
  position: relative;
  float: left;
}
.sf-menu > li > a {
  font-weight: 300;
  text-align: center;
  min-width: 103px;
  position: relative;
  font-size: 18px;
  display: block;
  font-family: 'Lato', sans-serif;
  text-align: center;
  padding-top: 90px;
  text-transform: capitalize;
  color: #2f3a47;
  text-decoration: none;
  padding: 10px 7px 9px;
  line-height: 16px;
}
.sf-menu > li {
  outline: none;
  border-bottom: 2px solid #ff7275;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
.sf-menu > li + li {
  margin-left: 2px;
  border-bottom: 2px solid #99b563;
}
.sf-menu > li + li + li {
  border-bottom: 2px solid #ffcc00;
}
.sf-menu > li + li + li + li {
  border-bottom: 2px solid #009cff;
}
.sf-menu > li + li + li + li + li {
  border-bottom: 2px solid #f1755c;
}
.sf-menu > li.current > a, .sf-menu > li.sfHover > a, .sf-menu > li:hover > a {
  color: #fff;
  background: #ff7275;
}
.sf-menu > li + li.current > a,
.sf-menu > li + li.sfHover > a,
.sf-menu > li + li:hover > a {
  background: #99b563;
}
.sf-menu > li + li + li.current > a,
.sf-menu > li + li + li.sfHover > a,
.sf-menu > li + li + li:hover > a {
  background: #ffcc00;
}
.sf-menu > li + li + li + li.current > a,
.sf-menu > li + li + li + li.sfHover > a,
.sf-menu > li + li + li + li:hover > a {
  background: #009cff;
}
.sf-menu > li + li + li + li + li.current > a,
.sf-menu > li + li + li + li + li.sfHover > a,
.sf-menu > li + li + li + li + li:hover > a {
  background: #f1755c;
}
.sf-menu ul {
  z-index: 500;
  text-align: center;
  padding: 8px 0;
  position: absolute;
  min-width: 148px;
  background: #99b563;
  top: 38px;
  left: 0;
}
.sf-menu ul a {
  font-size: 15px;
  font-family: 'Lato', sans-serif;
  line-height: 16px;
  text-decoration: none;
  color: #fcfcfc;
}
.sf-menu ul ul {
  left: 149px;
  top: -8px;
}
.sf-menu ul li {
  position: relative;
  padding: 8px 14px 2px;
}
.sf-menu ul li:last-child:before {
  display: none;
}
.sf-menu ul li:hover {
  background: #869f57;
}
.sf-menu ul li:before {
  left: 0;
  content: '';
  bottom: 0;
  position: absolute;
  width: 100%;
  background: url('../images/border.jpg') repeat-x;
  height: 1px;
  display: block;
}
.sf-menu a.sf-with-ul:before {
  content: '';
  background: url('../images/arrow1.png') 0 0 no-repeat;
  width: 7px;
  right: 7px;
  top: 17px;
  display: block;
  position: absolute;
  height: 4px;
}
.sf-menu ul a.sf-with-ul:before {
  content: '';
  background: url('../images/arrow2.png') 0 0 no-repeat;
  width: 5px;
  right: 12px;
  top: 14px;
  display: block;
  position: absolute;
  height: 7px;
}

/*==================================RESPONSIVE LAYOUTS===============================================*/
@media only screen and (max-width: 1199px) {
  .sf-menu {
    display: inline-block;
  }
}

@media only screen and (max-width: 995px) {
  .sf-menu {
    float: none;
  }
}

@media only screen and (max-width: 767px) {
  .sf-menu {
    display: none;
    float: none;
  }

  .select-menu {
    font: 12px/15px Arial, Helvetica, sans-serif;
    color: #202020;
    width: 100%;
    margin: 10px auto 20px;
    float: none;
    outline: none;
    border: 1px solid #474646;
  }
}

Answer 1

我不确定是否完全理解您的要求。
尝试将此代码添加到您的 css 文件的末尾：

nav {
    display: flex;
    justify-content: center;
}
.sf-menu {
    display: flex;
    width: 100%;
    justify-content: center;
}
.sf-menu > li {
    display: flex;
    flex: 1 1 0;
    justify-content: center;
}
.sf-menu > li > a {
    width: 100%;
    display: flex;
    justify-content: center;
}

Answer 2

添加此 CSS。希望它会起作用。

nav {
  text-align: center; width: 100%;
}