0
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はそれらを並べて配置しますが、次のリストはすべて前のものから1行下に落ちます。ナビゲーションバー、デバッグパーシャル、またはブートストラップが原因であるかどうかを確認しました。また、ビューのループで余分な新しい行をランダムに生成できるかどうか、またはリストの値にその行を含めることができるかどうかを確認します。
落下スクリーンショットhttp://i.imgur.com/E3pZr4s.png（テストリストが空です）
私がfloatを適用すると奇妙なことがあります。クロムブラウザ（バージョン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>
しようとした2つのブラウザをドロップダウンしません。
<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のはorginal HTMLはいずれかを持っていなかった、コードの一部として認識されますので、タイトルの後に新しい行を追加する必要がありました。
こんにちは、あなたが提供したhtml/cssは問題を再現しません。あなたのスクリーンショットに問題を再現するのに必要なレンダリングされたhtmlとcssを最小限に抑えてください。 –
@MichaelCokerこんにちは。レンダリングされたHTMLスニペットが追加されました。また、ここではjsfiddleでレンダリングされたバージョンです：https://jsfiddle.net/DmitriyS/qjoe3et9/ –