Question

有没有办法使不同容器中的流体内嵌元件具有相同的间隙间距？

简单的例子：

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

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

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

https://codepen.io/Falven/pen/QBwxLV

Answer 1

您应该为此使用flexbox。

学习flexbox的一种非常好的方法是玩flexbox froggy： https://flexboxfroggy.com/

.container {
    flex: 1;
}

此处的文档：https://developer.mozilla.org/en-US/docs/Web/CSS/flex

Answer 2

您可以使用flexbox达到此要求。

css技巧也有很好的指南，您可以轻松阅读。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.list-unstyled li {
  flex: 1 100%;
  flex-flow: row wrap;
  display: flex;
  align-items: space-evenly;
}

.list-unstyled li span {
  display: flex;
  flex: 1 50%;
}

<ul class="list-unstyled">
  <li>
    <span>Col1</span><span>Col2</span>
  </li>
  <li>
    <span>Col1</span><span>Col2</span>
  </li>
</ul>

<ul class="list-unstyled">
  <li>
    <span>Above ASDFW</span><span>ABOVE</span>
  </li>
  <li>
    <span>BELOW</span><span>BELOW @!#!@#</span>
  </li>
</ul>

流体内联元件间隙间距

2 个答案: