Question

我想水平显示列表项，但项之间的间距必须是动态的。即根据最长的项目，所有其他项目必须对齐。因此，为某个项目指定fixed width将无法正常工作。

说我们什么时候

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

Element 2必须向右移动，因为我们在下一行有一个较长的项目。

https://jsfiddle.net/yo4yqtpL/

我怎样才能做到这一点？

谢谢..

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>

希望这有帮助

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/

css - 动态间隔列表项

2 个答案: