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 { 
    text-align: center; width: 100%; 
} 

Answer 2

我不確定是否完全理解您的要求。
試着在你的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; 
}