奇怪的填充/列表設計中的間距

Question

我一直在設計三個鏈接跨設備的寬度在手機上。我無法弄清楚爲什麼我無法獲得正確的間距。什麼看起來？

這裏的設計：

這裏就是編碼的版本看起來像：

這裏是我的CSS：

.b-nav-Wrapper { 
    width: 100%; 
} 

.b-nav {margin: 0 auto;} 

.b-nav ul { 
    list-style: none; 
} 

.b-nav ul li{ 
    display: inline-block; 
    width: 33.33%; 
} 

.b-nav ul li a{ 
    text-decoration: none; 
    color: rgb(151,151,151); 
} 

.navNumber { 
    float: left; 
    width: 20%; 
    font-family: "korolev-condensed",sans-serif; 
    font-size: 2.5875em; 
    opacity: .50; 
} 

.navLink { 
    float: right; 
    width: 65%; 
    padding-top: 4px; 
    font-family: "mrs-eaves-xl-serif",sans-serif; 
    font-size: 1.2em; 
    line-height: 1em; 
    font-style: italic; 
    font-weight: 500; 
} 

*編輯：這是我的HTML：

<nav class="b-nav-Wrapper cf"> 
    <div class="b-nav"> 
     <ul> 
      <li class="active"> 
      <a href="#"> 
       <p class="navNumber active">01</p> 
       <p class="navLink active">Now Reading</p> 
      </a> 
      </li> 
      <li> 
      <a href="#"> 
       <p class="navNumber">02</p> 
       <p class="navLink">Browse My Books</p> 
      </a> 
      </li> 
      <li> 
      <a href="#"> 
       <p class="navNumber">03</p> 
       <p class="navLink">Notes &amp; Quotes</p> 
      </a> 
      </li> 
     </ul> 
    </div> 
</nav> 

Answer 1

你沒有把你的html，這讓我們猜測它。但如果.b-nav ul li被稱爲編號部分，則應該嘗試width小於33.33％。因爲其他元素的1px margin或padding會導致它分成兩行。如果它沒有解決，把你的鏈接或HTML。