html - 为什么flexbox容器将列表项分成两行？

我有一个flex元素<header>，其中包含两个flex项目：<span>和<ul>

我的目标是像这张照片一样在一行中水平显示弹性项目：


但是我得到的结果是：

我已经发现可以通过使用flex-basis: 100%;解决我的问题，但是flexbox容器的行为对我来说是无法理解的。

为什么将<li>项目分成两行而不是一一显示？

的HTML：

<header>
   <span>LOGO</span>
   <ul>
      <li>Library</li>
      <li>Telegram channel</li>
      <li>Contacts</li>
      <li>Donate</li>
   </ul>
</header>

CSS：

span {
   border: 1px solid black;
   margin-right: 10px;
}
ul {
   padding: 10px;
}
li {
   display: inline-block;
   padding: 0 5%;
   border: 1px solid black;
}
header {
   display: flex;
   align-items: center;
}

最佳答案

对width:100%使用margin:0和ul

span {
   border: 1px solid black;
   margin-right: 10px;
}
ul {
   padding: 10px;
    margin:0;
    width:100%;
}
li {
   display: inline-block;
   padding: 0 5%;
   border: 1px solid black;
}
header {
   display: flex;
   align-items: center;
}

<header>
   <span>LOGO</span>
   <ul>
      <li>Library</li>
      <li>Telegram channel</li>
      <li>Contacts</li>
      <li>Donate</li>
   </ul>
</header>

关于html - 为什么flexbox容器将列表项分成两行？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53528363/