<ul> 元素未占用全部内容宽度

Question

我正在制作一个带有无序列表的导航栏。我正在使用 flexbox。

代码如下：

/* navbar */

.top-navbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 4%;
}

.top-nav-list {
  flex: 0 1 auto;
  /* I have to change the grow & basis to get my desired result */
}

.top-nav-list li {
  display: inline-block;
  padding: 0 2%;
  /* This padding has no effect on the full width of ul element */
}

.watch-link {
  margin-left: auto;
}

<header>
  <nav class="top-navbar">
    <div class="nav-logo">Title</div>
    <ul class="top-nav-list">
      <!-- This is the problem element -->
      <li>Browse</li>
      <li><a href="">Movies</a></li>
      <li><a href="">TV</a></li>
      <li>Search Bar</li>
      <li>Expand</li>
    </ul>
    <a href="#" class="watch-link"><button class="watch-btn">Watchlist</button></a>
  </nav>
</header>

容器中有 3 个弹性项目。其中之一是无序列表。 ul 没有占用其全部内容宽度，即使在 flex 容器中有可用的 space。它分成两行。我可以设置 flex-grow 和 flex-basis 以获取更多可用的 space。

但是默认情况下它不应该采用完整的内容宽度吗？ 所有列表项都是内联块，最后一个项目仍然进入下一行。 width:fit-content 也不行。 padding 对宽度没有影响。它只是让更多的项目进入第二行。

我也在使用 sanitize css 来规范化浏览器默认样式。

Answer 1

li 项似乎在 ul 元素内中断。所以在 CSS:

中使用 white-space:nowrap;

.top-nav-list {
    flex: 0 1 auto;
    white-space:nowrap;
}

一个例子：

/* navbar */

.top-navbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 4%;
}

.top-nav-list {
  flex: 0 1 auto;
  white-space:nowrap;
  /* I have to change the grow & basis to get my desired result */
}

.top-nav-list li {
  display: inline-block;
  padding: 0 2%;  
}

.watch-link {
  margin-left: auto;
}

<header>
  <nav class="top-navbar">
    <div class="nav-logo">Title</div>
    <ul class="top-nav-list">
      <!-- This is the problem element -->
      <li>Browse</li>
      <li><a href="">Movies</a></li>
      <li><a href="">TV</a></li>
      <li>Search Bar</li>
      <li>Expand</li>
    </ul>
    <a href="#" class="watch-link"><button class="watch-btn">Watchlist</button></a>
  </nav>
</header>

Answer 2

我找到了断行的解释。是这一行：

padding: 0 2%;  /*This padding has no effect on the full width of ul element */

我使 child 的 (list-item) 填充等于 parent 的 (ul) 宽度的百分比。但是宽度还没有定义。 parent 的宽度由用户或其内容定义。所以，我使用了一个尚不存在的变量。 这也是填充对最终宽度没有影响的原因。

因此，由于浏览器无法在不知道 parent 的宽度的情况下设置 padding，因此它首先根据 children 的所有内容计算 ul 的总宽度没有填充的宽度。然后，在设置 ul 没有填充的宽度后，它为每个 children 提供 2% 填充。但是，由于 ul 中没有可用的额外 space/width，因此如果我们使用 white-space: nowrap

行 wraps/breaks 或溢出

如果我们使用任何其他填充单位，如 px、em 或 vw，它会起作用，因为 children 的宽度不会取决于parent的宽度，用户未定义。

<ul> 元素未占用全部内容宽度

<ul> element not taking full content width

html

css

width

html-lists

flexbox