eachで取って来た要素が横並びにならない

モデルから取って来た要素をeachで複数表示しています。
その複数表示されているつ一つを横並びにしたいのですが、できません。

html
1<% @comic_index.each do |comic| %>
2 <div class="topnewbox"><%= link_to (image_tag comic.front_cover.to_s),user_comic_path(id: comic.id, user_id: current_user.id) %></div>

css
1.topnewbox{
2  display: inline-block;
3  margin: 5px;
4  padding: 10px;
5  background-color: #ffffff;
6}

何卒ご教授ください。よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

css
1.topnewbox{
2  display: inline-flex;
3  margin: 5px;
4  padding: 10px;
5  background-color: #ffffff;
6}

これでいかがでしょうか？
ブロック要素は縦に並びますのでflexに変更しました。

＜追記＞
inline-blockが横並びになるのを忘れていました。
上記のCSSでも行けますがinline-blockのまま横並びにしたい場合は

html
1<% @comic_index.each do |comic| %>
2<div class="topnewbox">
3  <div class="hoge">
4    <%= link_to (image_tag comic.front_cover.to_s),user_comic_path(id: comic.id, user_id: current_user.id) %>
5  </div>
6</div>

css
1.topnewbox{
2  display: block;
3  margin: 5px;
4  padding: 10px;
5  background-color: #ffffff;
6  width: 100%;
7}
8.hoge{
9  display: inline-block;
10}