導航按鈕不能內聯顯示

Question

好的，我的導航設置爲內嵌塊，但出於某種原因，在Safari瀏覽器中，它顯示爲這樣。它在Chrome中運行正常，但我無法弄清楚我需要改變什麼。它改變了我的網頁瀏覽器窗口的大小。任何幫助，將不勝感激。

*注意：我使用的是與Susy與此這就是爲什麼有@include span(12)

所需的輸出 CSS：

nav{ 
    @include span(12); 
nav ul{ 
    @include span(12); 
    list-style: none; 
    display: inline; 
    float: right; 

} 

li{ 
    display: inline; 
    float: right; 
    padding: 2%; 
} 
} 


nav ul li a { 
    display: inline-block; 
    text-decoration: none; 
    color: white; 
    background-color: #FF4343; 
    border-radius: 49px; 
    -moz-border-radius: 49px; 
    -webkit-border-radius: 49px; 
    border: 0px solid #EB0000; 
    width: 100%; 
    height: auto; 
    text-align: center; 
    padding: 10%; 
    font-family: 'Montserrat', sans-serif; 
    font-size: small; 
    text-align: center; 
} 

HTML：

<nav id="desktop-nav"> 
<ul id="desktop-nav"> 
<li><a href="#">Our Team</a></li> 
<li><a class="scroll" id="green" href="#form-header">Contact Us</a> </li> 
<li><a href="location.html">Location</a></li> 
<li><a href="#">Our History</a></li> 
<li><a href="services.html">Our Services</a></li> 
<li><a href="index.html">Home</a></li> 
</ul> 
</nav> 

Answer 1

試試width:100%;。這應該讓它一路走下去。