Css 我怎样才能把它列成一个水平列表？

现在我的用户正在垂直显示。我希望它们水平并排显示。我知道这是一个非常简单的方法，但是，我很难让它成为我想要的。先谢谢你

用户/索引

<div class="page-header">
<center><strong><h1> All Users </h1></strong></center>
</div>

  <% @users.each do |user| %>
  <div class="user horizontal-align col-md-2">
     <%= link_to image_tag(user.avatar.url(:thumb)), user %>
      <br><%= link_to user.name, user %></br>
        <% if current_user.admin %>
     <%= link_to "Delete", user, method: :delete, data: { confirm: "Are you sure?" } %>

        <% end %>
    <% end %>
 </div>

<div class="center">
<%= will_paginate @users, renderer: BootstrapPagination::Rails %>
</div>

---

第一件事：停止使用中心标记。它已被弃用，而且不可靠。使用CSS满足您的造型需求

要使用户水平显示，需要将所有用户详细信息（本例中为链接）包装到某种元素中。潜水可能是最好的。然后需要将这些元素设置为

display:inline block

试试这个

<div class="col-md-offset-4 col-md-8 col-lg-8 col-lg-offset-4">

  <% @users.each do |user| %>
    <div class="user col-md-2 col-lg-2 text-center">
      <%= link_to image_tag(user.avatar.url(:thumb)), user %>
      <p><%= link_to user.name, user %></p>
      <% if current_user.admin %>
        <%= link_to "Delete", user, method: :delete, data: { confirm: "Are you sure?" } %>
      <% end %>
  <% end %>
</div>

这将使您在中屏幕和大屏幕上有5个窗口，在小屏幕和超小屏幕上有垂直堆栈。给你来一杯快餐

这里还有未关闭的div标签：

<div class="panel panel-default">
<div class="panel-heading center">

尝试以下操作：

将.user与.col-x-x容器隔离。col容器只能用于布局。设置.user元素的样式将覆盖BS3布局样式

删除CSS for.user中的所有宽度定义。让宽度下降

用.row包装嵌套列

jsFiddle：

例：

我认为

col-med-8

应该是

col-md-8

你能给我们看看呈现的HTML吗？这显然是一个css问题，因此ruby与此无关，并限制了可以提供帮助的人数you@PeterVR谢谢你的md修复。我在问题中添加了CSS，但是我并没有真正使用它。我是一个完全的初学者，所以谢谢你的帮助。你想要多少个？您可以将

col-lg-6 col-md-6 col-sm-12 col-xs-12

添加到您的

div.user

这将在大屏幕和中屏幕上并排显示两个用户，在小屏幕和超小屏幕上垂直显示两个用户。对于3个用户，请使用

col-？？-4

记住网格是12宽的，所以您需要12/x的用户量。@engineersmnky我希望有5个用户。当我尝试这一切，它所做的是错开一切的权利。不幸的是，它们仍然是垂直的。谢谢，我会去掉中间的标签。我包括了我的用户css，但是我并没有真正使用它，我知道我应该使用它。@Annette，包括的css有一个

用户

类的选择器。在HTML中，我看不到任何地方有实际的用户类。使用

将所有三个用户链接包装在循环中。我在开发网站中添加了它，但速度不够快。不幸的是，它仍然垂直显示。有什么我遗漏的吗？再次感谢您的帮助。JSFIDLE将它们显示为垂直。我希望它们是水平的。谢谢你！代码将所有内容向右移动，用户的图片仍然是垂直的。再次感谢您花时间帮我做这件事。@Annette伸展箱子，您会看到一旦箱子达到一定的尺寸，它们就会变成5个角。如果不管屏幕大小，您总是想要5个屏幕，则需要添加

col-sm-2 col-xs-2

I已更新小提琴以显示you@Annette至于向右移动，这是您在添加

offset-x

时指定的，它将

x

网格单元向右移动。您可以删除偏移，使所有内容都位于左对齐的8个网格单元内。谢谢！我会尝试一下，让你知道。我感谢所有的帮助。这很有效！！非常感谢你。我不能投赞成票，所以我检查了答案。

.user{
     margin:0.2%;
     display:block;
}

<div class="panel panel-default">
<div class="panel-heading center">

<div class="col-md-offset-4 col-md-8 col-lg-8 col-lg-offset-4">
    <div class="row">
        <% @users.each do |user| %>
        <div class="horizontal-align col-md-2">
            <div class="user">
                <%= link_to image_tag(user.avatar.url(:thumb)), user %>
                <br><%= link_to user.name, user %></br>
                <% if current_user.admin %>
                <%= link_to "Delete", user, method: :delete, data: { confirm: "Are you sure?" } %>
                <% end %>
            </div>
        </div>
        <% end %>
    </div>
</div>