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

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。