テーブルをインラインで浮動または表示する方法

Question

私のアプリケーションでは、順序付けられていないリスト要素を使用して、専用インデックスページのユーザーに関する情報が表示されます。
この情報は無骨であるため、各ユーザーのほかにユーザーのフォローとフォロワーのリストなどの情報を追加したいので、基本ユーザーの詳細の横に2つのテーブルを追加することを考えました。

.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タグ内のdivとテーブルによるものであったが、結果は同じであることを考えて、divタグでulとliタグを変更しようとしました：

.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>

Webインスペクタを使用すると、代わりにul（またはdiv）要素の外側と下の表を含むdiv要素に気付くことができます。
横並びにこれらの要素を横に並べ、一方が下になるようにしたいとします。

Answer 1

ULは、直接的な子供のためにのみLIを持つことができます。

.users詳細はタグに巻き付けることができると table displayもリセットすることができる

：

例：各ユーザーが:)

1個のLiを行う

.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>