导航按钮不能内联显示

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%;。这应该让它一路走下去。