如何浮动或显示表格内联

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块显示行内。
我试着用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）元素的外部和下面的表格，而其中应包含该元素。
我想要的是水平对齐这些元素，而他们导致一个在另一个之下。

Answer 1

UL只能有LI为直接孩子。

.users细节可以被包裹在一个标签和tabledisplay也得以复位：

例如：

.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里为每个用户:)