標題中的中心ul導航

Question

我試圖搜索這個答案，因爲我知道這已被問了很多次，我之前發現的每個建議都不適合我。我怎樣才能讓這個ul導航爲中心，而不是正確的浮動？謝謝！

jsfiddle link here

<header> 
    <div id="header-content"> 
    <nav class="header"> 
     <input class="menu-btn" type="checkbox" id="menu-btn" /> 
     <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label> 
     <ul class="menu"> 
     <li><a href="#work">Our Work</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#careers">Careers</a></li> 
     <li><a href="#contact">Contact</a></li> 
     </ul> 
    </nav> 
    </div> 
</header> 

nav.header { 
    width: 100%; 
    height: auto; 
    float: right; 
    background-color: Silver; 
    text-align: left; 
    margin: 0 0 10px 0; 
} 
.header ul { 
    display: inline-block; 
    list-style-type: none; 
    text-align: center; 
    margin: 0; 
    padding: 0; 
} 
.header ul li { 
    display: block; 
    float: left; 
} 
.header li a { 
    display: block; 
    float: left; 
    padding: 1em; 
    /* border-right: 1px solid #f4f4f4;*/ 
    text-decoration: none; 
    color: #000000; 
} 
.header li a:hover { 
    background-color: #B5B5B5; 
} 

Answer 1

一種解決方案是給菜單UL的寬度（*我用最小寬度這裏），其設置爲一個塊，並且距設置爲0 auto：

.header ul { 
    display: block; 
    list-style-type: none; 
    text-align: center; 
    margin: 0 auto; 
    padding: 0; 
    min-width: 450px; 
} 

並設置.header .menu有沒有浮動：

.header .menu { 
    clear: none; 
    float: none; 
    max-height: none; 
} 

Howeve這不是一個完美的解決方案，因爲您需要爲較小尺寸的屏幕編寫斷點。