html - 是否可以在 div 中使用 td 元素(没有表格)？

Question

我正在尝试创建非常灵活的网格，我的代码大致如下

<div class="grid">
  <div class="grid-row">
    <td class="grid-cell">TEST</td>
    <td class="grid-cell">TEST</td>
    <td class="grid-cell">TEST</td>
  </div>
</div>

但是我有问题:

1. 如果我在行内使用 td 元素，则有时不会应用 CSS 类样式。样式在 React 环境中应用，在 JSFiddle 纯 Bootstrap 环境中不应用。
2. 如果我在行内起诉 div 元素，那么这些 div 元素不会位于一行中，而是每个 div 位于更大的 div(行)元素内的单独行中。

那么 - 是否可以(建议)在 div 中使用 td 元素而不使用 table 元素？如果没有，那么如何在一行/一行中组织 div 元素(属于一行)？

这个问题与我的另一个问题有关(也有指向 JSFiddle 代码的链接): Container div that contains scrollable table and that fills all the client area and that removes page scrolls

Answer 1

使用列表元素并将子元素设置为内联..将 list-style-type 设置为 none 以删除元素符号标记。

ul{
  list-style-type: none;
}
ul li{
  display: inline;
}

<ul>
  <li>
  TEST
  </li>
  <li>
  TEST
  </li>
</ul>

此外，您的 div 问题.. 这是 div 所需的行为，因为 div 是 block 元素，而 span 是内联 block 元素。您应该使用 span 或将 div 设置为 inline-block。