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

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 的其他元素导致它分成两行。如果没有解决，请将您的 link 或 html.

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

Weird padding / spacing in list design

css

navigation

nav