CSS - 动态间距列表项目

Question

我希望将列表项水平显示，但是项目之间的间距必须是动态的。也就是说，根据最长的项目，所有其他项目都必须对齐。因此，为项目指定固定宽度是行不通的。

例如，当我们有以下内容：

Element 1     Element 2     Very long element can also be here      This is one more element which is longer
Longer than Element1   Next element   More ones

我希望它显示为

Element 1             Element 2        Very long element can also be here    This is one more element which is longer
Longer than Element1  Next element     More ones

元素2必须向右移动，因为下一行有一个更长的项目。

https://jsfiddle.net/yo4yqtpL/

我怎样才能实现这个？

谢谢。

- Thiyagu

---

你可以使用HTML表格。 - keziah

@thewbmstr 的想法并不是事先指定项目的宽度，即列数。 - Thiyagu

没有CSS方法可以实现这个结果，需要使用Javascript。 - Paulie_D

Answer 1

试试这个

table {
    width: 100%;
}

table td {
    padding: 10px;
}

<table>
    <thead>
        <tr>
            <td>Element 1</td>
            <td>Element 2</td>
            <td>Very long element can also be here</td>
            <td>This is one more element which is longer</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Longer than Element1</td>
            <td>Next element</td>
            <td>More ones</td>
        </tr>
    </tbody>
</table>

希望这有所帮助。

- keziah

---

谢谢你的回答。但是这会将一个项目包装到下一行。我不知道每行应该放置多少个元素，这取决于项目的长度。 - Thiyagu

我的意思是，数据（列表项）的加载将在循环中进行。因此，我将不知道何时开始新行。 - Thiyagu

JavaScript Ajax. （AngularJS） - Thiyagu

Answer 2

尝试使用这段代码，看看是否有帮助

ul {
  display: flex;
  flex-wrap: wrap;
}
li {
  min-width: 5em;
  list-style: none;
}

<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Very long element can also be here</li>
<li>This is one more element which is longer</li>
<li> Longer than Element1</li>
</ul>

https://jsfiddle.net/yo4yqtpL/8/

- Dhaval Chheda

---

仍然无法根据第二行中的项目对Element2进行对齐。 - Thiyagu

请检查答案中更新的 Fiddle，并根据您的设计要求增加或减少 div 类中的边距。 - Dhaval Chheda

我将要加载的数据是动态的。你的答案将内容分组到div中（假设数据为静态）。 - Thiyagu

我无法预知加载的数据会是动态的，但在这种情况下可以使用jQuery向div中添加项目，您可以使用classname为div添加特定项目到特定的div中...这种结构将保持不变。 - Dhaval Chheda