时间戳

首页 > 解决方案 > 为什么 flexbox 容器将列表项拆分为两行？

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

问题描述

我有一个<header>包含两个弹性项目的弹性元素：<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;
}

标签： htmlcssflexbox

解决方案

使用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>

推荐阅读