Question

SCSS

 ul {
     float: left;
 }

视图

<% @project.columns.each do |col| %>
    <strong><h2><%= col.name %></h2></strong>
    <ul id='tasks_<%= col.name %>' data-update-url='<%= sort_project_tasks_url(@project) %>'>
    <% col.tasks.sort_by { |t| t.priority }.each do |task| %>

        <li id="task_<%= task.id %>">
             <%= task.name %>| <%= task.column.name %> | <%= task.priority %>
        </li>

    <% end %>
    </ul>
<% end %>

问题：我尝试并行显示所有无序列表。我的scss将它们并排放置，但是每个下一个列表都会从前一个列表中删除一行。我检查了我的导航栏，调试部分或Bootstrap是否导致这种情况。另外，检查我是否可以在视图循环中随机生成额外的新行，或者列表值是否可以包含它。

关闭屏幕截图http://i.imgur.com/E3pZr4s.png（测试列表为空）
很奇怪，如果我申请浮动：左;在列表元素上他们不会下降 https://i.imgur.com/Hbqq0rX.png

尝试了两种浏览器：Chromium浏览器（版本57.0.2987.98）和Firefox 53.0（64位）

UPD：渲染的html部分

<h1>Tasks:</h1>

<strong><h2>dev</h2></strong>
<ul id="tasks_dev" data-update-url="http://localhost:3000/projects/1/tasks/sort">

  <li id="task_1">
    Do it| dev | 0
  </li>


  <li id="task_3">
    quas et autem| dev | 1
  </li>


  <li id="task_6">
    autem vel est| dev | 4
  </li>


  <li id="task_8">
    sunt velit ut| dev | 6
  </li>


  <li id="task_14">
    itaque quia est| dev | 12
  </li>


  <li id="task_16">
    illum qui provident| dev | 14
  </li>


  <li id="task_17">
    accusamus voluptas pariatur| dev | 15
  </li>


  <li id="task_20">
    dolorum voluptate ipsa| dev | 18
  </li>

<strong><h2>done</h2></strong>

<ul id="tasks_done" data-update-url="http://localhost:3000/projects/1/tasks/sort">

  <li id="task_2">
    quaerat et maiores| done | 0
  </li>


  <li id="task_4">
    autem doloremque doloribus| done | 2
  </li>


  <li id="task_11">
    voluptates quod sunt| done | 9
  </li>


  <li id="task_12">
    aliquam eum et| done | 10
  </li>


  <li id="task_13">
    officiis animi excepturi| done | 11
  </li>


  <li id="task_15">
    delectus dignissimos beatae| done | 13
  </li>


  <li id="task_18">
    ullam dolorum aut| done | 16
  </li>


  <li id="task_19">
    aut qui magni| done | 17
  </li>

 <strong><h2>production</h2></strong>

<ul id="tasks_production" data-update-url="http://localhost:3000/projects/1/tasks/sort">

  <li id="task_5">
    eos tempora consequatur| production | 3
  </li>


  <li id="task_7">
    aperiam rem et| production | 5
  </li>


  <li id="task_9">
    et omnis explicabo| production | 7
  </li>


  <li id="task_10">
    consequatur iusto qui| production | 8
  </li>


  <li id="task_21">
    corrupti doloremque quod| production | 19
  </li>

<strong><h2>test</h2></strong>

<ul id="tasks_test" data-update-url="http://localhost:3000/projects/1/tasks/sort">
</ul>

不得不在标题之后添加新行，因此stackoverflow会将其识别为代码的一部分，原始html没有任何内容。

Answer 1

试试这个。将每个列表包含在div中并使用float：left on div。不要忘记使用清除：列表之后。

.abc {
  float: left;
}
#clear{
  clear:both;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="http://localhost:3000/">Agile-board</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="http://localhost:3000/projects/1#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="http://localhost:3000/projects/1#">Action</a></li>
            <li><a href="http://localhost:3000/projects/1#">Another action</a></li>
            <li><a href="http://localhost:3000/projects/1#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a rel="nofollow" data-method="delete" href="http://localhost:3000/logout">Logout</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>


<h1>Tasks:</h1>
<div class="abc">
  <strong><h2>dev</h2></strong>
  <ul id="tasks_dev" data-update-url="http://localhost:3000/projects/1/tasks/sort">
    <li id="task_1">
      Do it| dev | 0
    </li>
    <li id="task_3">
      quas et autem| dev | 1
    </li>
    <li id="task_6">
      autem vel est| dev | 4
    </li>
    <li id="task_8">
      sunt velit ut| dev | 6
    </li>
    <li id="task_14">
      itaque quia est| dev | 12
    </li>
    <li id="task_16">
      illum qui provident| dev | 14
    </li>
    <li id="task_17">
      accusamus voluptas pariatur| dev | 15
    </li>
    <li id="task_20">
      dolorum voluptate ipsa| dev | 18
    </li>
  </ul>
</div>
<div class="abc">
  <strong><h2>done</h2></strong>
  <ul id="tasks_done" data-update-url="http://localhost:3000/projects/1/tasks/sort">
    <li id="task_2">
      quaerat et maiores| done | 0
    </li>
    <li id="task_4">
      autem doloremque doloribus| done | 2
    </li>
    <li id="task_11">
      voluptates quod sunt| done | 9
    </li>
    <li id="task_12">
      aliquam eum et| done | 10
    </li>
    <li id="task_13">
      officiis animi excepturi| done | 11
    </li>
    <li id="task_15">
      delectus dignissimos beatae| done | 13
    </li>
    <li id="task_18">
      ullam dolorum aut| done | 16
    </li>
    <li id="task_19">
      aut qui magni| done | 17
    </li>
  </ul>
</div>
<div class="abc">
  <strong><h2>production</h2></strong>
  <ul id="tasks_production" data-update-url="http://localhost:3000/projects/1/tasks/sort">
    <li id="task_5">
      eos tempora consequatur| production | 3
    </li>
    <li id="task_7">
      aperiam rem et| production | 5
    </li>
    <li id="task_9">
      et omnis explicabo| production | 7
    </li>
    <li id="task_10">
      consequatur iusto qui| production | 8
    </li>
    <li id="task_21">
      corrupti doloremque quod| production | 19
    </li>
  </ul>
</div>
<div class="abc">
  <strong><h2>test</h2></strong>
  <ul id="tasks_test" data-update-url="http://localhost:3000/projects/1/tasks/sort">
  </ul>
</div>
<div id="clear"></div>
<br>
<br>
<h3>Crew:</h3>
<br> Dmitriy Spivakov(dmitriy.spiv@gmail.com) : RoR junior |
<a href="http://localhost:3000/user_roles/1/edit">Edit role</a> |
<a rel="nofollow" data-method="delete" href="http://localhost:3000/user_roles/1">Delete</a>
<br>
<a href="http://localhost:3000/projects/1/user_roles/new">Add coworker</a>
<pre class="debug_dump">--- !ruby/object:ActionController::Parameters
parameters: !ruby/hash:ActiveSupport::HashWithIndifferentAccess
  controller: projects
  action: show
  id: '1'
permitted: false
</pre>

Answer 2

我相信这是因为ul没有宽度参数。尝试：

ul {
  float: left;
  width: 100%;
}

Css float：left;每一项

2 个答案: