Html 流体内联元件间隙间距

是否有办法使不同容器中的流体内联元素具有相同的间隙间距

简单的例子：

<ul style="list-style-type: none; padding: 0px; margin: 0px;">
  <li>
    <span>Row1Col1</span><span style="margin-left: 10px">Row1Col2</span>
  </li>
  <li>
    <span>Row2Col1</span><span style="margin-left: 10px">Row2Col2</span>
  </li>
</ul>

Row1冷却液1冷却液2


Row2Col1Row2Col2

在上述示例中，列之间用边距隔开，但是，当列变宽/变小或宽度不同时，这不起作用-请参见下文：

<ul style="list-style-type: none; padding: 0px; margin: 0px;">
  <li>
    <span>Row1Col1-abcd</span><span style="margin-left: 10px">Row1Col2</span>
  </li>
  <li>
    <span>Row2Col1</span><span style="margin-left: 10px">Row2Col2-abcd</span>
  </li>
</ul>

Row1Col1-abcdRow1Col2


Row2Col1Row2Col2 abcd

---

您应该为此使用flexbox

学习flexbox的一个非常好的方法是玩flexbox青蛙：

---

此处的文档：

您可以使用flexbox来实现此要求

还有一个很好的css技巧指南，您可以轻松阅读

。列出未设置样式的li{
弹性：1100%；
柔性流：行换行；
显示器：flex；
对齐项目：间距均匀；
}
.列表未设置样式的li span{
显示器：flex；
弹性：150%；
}

冷水


冷水




在上面


下面@#

不幸的是，这并不能解决问题。在您的示例中，Row1Col1和Row1Col2位于不同的行（李）。@FranciscoAguilera是的，它们看起来很像，所以我按您的预期将它们弄错了。很抱歉，我现在调整了代码。您可以再次检查。不工作。很遗憾，行没有对齐。。。您能否详细说明如何使用flex box解决上述问题？

.container {
    flex: 1;
}