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

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。