奇怪的填充/列表设计中的间距

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。