html - 导航按钮不显示内联

Question

好的，所以我的导航设置为内联 block ，但出于某种原因，在 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%;。这应该能让它一路跨越。