如何浮動或顯示錶格內聯

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裏爲每個用戶:)