Question

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

.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块的内联。
我尝试使用ul标记更改li和div标记，认为问题是由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）元素之外和之下的表格，DataContext应该包含在其中。
我想要的是将这些元素并排水平对齐，而它们会导致一个在另一个之下。

Answer 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：）

如何浮动或显示内联表格

1 个答案: