html - 如何在html/css中向右移动单个列表？

我有一个单列表，可以动态添加和删除值。因为我们要在其上显示的屏幕尺寸不高，所以我希望这些行向右移动。例如：

这是适合屏幕显示的表格

 ____________
|______1_____|
|______2_____|
|______3_____|

这是一张不适合屏幕的桌子

 ________________________
|______1_____|_____4_____|
|______2_____|_____5_____|
|______3_____|

预先感谢，这是桌子的样子。

<table id="values_table" class="table table-bordered panel">
  <tbody>
    <tr>
      <th><strong>Value</strong></th>
    </tr>

    <tr class="font-color3">
      <td data="1"></td>
    </tr>

    <tr class="font-color3">
      <td data="2"></td>
    </tr>

    <tr class="font-color3">
      <td data="3"></td>
    </tr>

    <tr class="font-color3">
      <td data="4"></td>
    </tr>

    <tr class="font-color3">
      <td data="5"></td>
    </tr>
  </tbody>
</table>

最佳答案

试试这个，display: flex;的几个技巧

tbody {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 80px;
}
tr {
  border: 1px solid #000;
  width: 100%;
}

<table id="values_table" class="table table-bordered panel">
  <tbody>

    <tr class="font-color3">
      <td data="1">1</td>
    </tr>

    <tr class="font-color3">
      <td data="2">2</td>
    </tr>

    <tr class="font-color3">
      <td data="3">3</td>
    </tr>

    <tr class="font-color3">
      <td data="4">4</td>
    </tr>

    <tr class="font-color3">
      <td data="5">5</td>
    </tr>
  </tbody>
</table>

关于html - 如何在html/css中向右移动单个列表？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41390329/