如何浮动或显示内联表格答案

【问题标题】：How to float or display inline a table如何浮动或显示内联表格
【发布时间】：2017-02-26 21:19:43
【问题描述】：

我的应用程序使用无序列表元素在专用索引页面中显示有关用户的信息。
由于这些信息是最基本的，我想添加更多信息，例如每个用户之外的用户关注和关注者列表，所以我想在基本用户详细信息旁边添加两个表。下面的代码是我想要实现的示例：

.users {
  list-style: none;
  margin: 0;
  }
.users li {
  background-color: green;
  width: 200px;
  overflow: auto;
  padding: 10px 0;
  border-bottom: 1px solid black;
}
.users div {
  background-color: green;
  width: 200px;
  float: right;
}

<ul class="users">
  <!-- <% @users.each do |user| %> -->
  <li> user.details </li>
  <div>
    <table>
      <tr>
        <td> follower1 </td>
        <td> follower2 </td>
      </tr>
      <tr>
        <td> follower3 </td>
        <td> follower4 </td>
      </tr>      
    </table>
  </div>
  <!-- <% end %> -->
</ul>

但是，表格不会浮动或与li 块内联显示。
我试图用div 标记更改ul 和li 标记，认为问题是由于ul 标记内的一个div 和一个表，但结果是一样的：

.users {
  list-style: none;
  margin: 0;
  }
  .details {
    background-color: green;
    width: 200px;
    overflow: auto;
    padding: 10px 0;
    border-bottom: 1px solid black;
  }
  .following {
    background-color: green;
    width: 200px;
    float: right;
  }

<div class="users">
  <!-- <% @users.each do |user| %> -->
  <div class="details"> hello </div>
  <div class="following">
    <table>
      <tr>
        <td> follower1 </td>
        <td> follower2 </td>
      </tr>
      <tr>
        <td> follower3 </td>
        <td> follower4 </td>
      </tr>      
    </table>
  </div>
  <!-- <% end %> -->
</div>

使用网络检查器可能会注意到div 包含在ul（或div）元素之外和下方的表格，而应该将其包含在其中。
我想要的是水平对齐这些元素，而它们的结果是一个在另一个之下。

【问题讨论】：

标签： css ruby-on-rails sass

【解决方案1】：

UL 只能有 LI 直接子代。

.users 详细信息可以包含在标签中，table display 也可以重置：

示例：

.users {
  list-style: none;
  margin: 0;
}

.users li {
  background-color: green;
  width: 420px;
  overflow: auto;
  padding: 10px 0;
  border-bottom: 1px solid black;
}

.users div, .users table {
  background-color: green;
  width: 200px;
  display: inline-block;/* or inline-table */
  vertical-align: top;
}

<ul class="users">
  <!-- <% @users.each do |user| %> -->
  <li>
    <div>
    user.details
    </div>
      <table>
        <tr>
          <td> follower1 </td>
          <td> follower2 </td>
        </tr>
        <tr>
          <td> follower3 </td>
          <td> follower4 </td>
        </tr>
      </table>
  </li>
  <!-- <% end %> -->
</ul>

每个用户 1 li :)

【讨论】：