html - 带有水平列表的 Flexbox 添加一个 padding-left

标签 html css flexbox

<分区>

为什么 Flexbox 在水平列表上添加左填充,即使有 justify-content: space-between ?

 <div class="list-container">
   <ul>
     <li>One</li>
     <li>Two</li>
     <li>Three</li>
     <li>Four</li>
     <li>Five</li>
   </ul>
</div>
.list-container {
  width: 500px;
  background-color: darkseagreen;
}
.list-container ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
}
.list-container li {
  flex: 0 0 auto;
  background-color: darkorange;
}

jsfiddle:https://jsfiddle.net/telemacus/vdo9a54c/10/

在“ul”上添加“padding-left: 0”可以解决问题。

最佳答案

您需要删除填充使用:

ul{
  padding: 0;
}

更新的 JSFiddle:https://jsfiddle.net/w783mxaf/

关于html - 带有水平列表的 Flexbox 添加一个 padding-left,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59225433/

上一篇:css - 使用 将 "col-lg-12"放入响应式容器中

下一篇:javascript - 为什么引导面板切换在 reactjs 构建版本中不起作用?

相关文章:

javascript - jQuery .change() 函数问题

html - 文本溢出省略号和 flex 在 Firefox 上不起作用

css - 为什么 flex 元素限制为父级大小?

html - css 在鼠标悬停时暂停幻灯片

javascript - Jquery nestedSortable 所有 parent 首先都是空的

javascript - Firefox 不加载脚本

html - 如何垂直居中 flexbox 元素的内容

javascript - 比较 HTML5 Canvas 中的两种字体

javascript - 调整 HTML5 Canvas 大小以适应窗口

javascript - 具有外部 URL 的 iframe,文档单击不起作用