Fatal编程技术网
  • html/
  • Html Css浮动：左；每一项都会进一步下降

Html Css浮动：左；每一项都会进一步下降

html css ruby-on-rails sass

Html Css浮动：左；每一项都会进一步下降,html,css,ruby-on-rails,sass,Html,Css,Ruby On Rails,Sass,scss 看法 完成了 奥特姆·多洛雷姆格·多洛里巴斯|完成| 2 沃鲁帕特斯必须完成9 aliquam eum et | done | 10 除完成外的其他活动11 贝塔显贵代表团|完成| 13 ullam dolorum aut |完成| 16 aut qui magni |完成| 17 制作 必须在标题后添加新行，以便stackoverflow将其识别为代码的一部分，而原始html没有 试试这个。将每个列表括在一个div中，并在div上

scss

看法




    

  •
问题是：我试图并行显示所有无序列表。我的SCS将它们并排放置，但下一个列表会比上一个列表低一行。我检查了我的导航栏、调试部分或引导是否导致此问题。另外，检查是否可以在视图循环中随机生成额外的新行，或者列表值是否可以包含它

下拉屏幕截图（测试列表为空）
奇怪的是，如果我应用float:left；在列表元素上，它们不会下拉

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

UPD：呈现的html部分

<% @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 %>

任务：
dev

    

  • 
去做吧| dev | 0

    • 

  • 
类与类开发1

    • 

  • 
autem vel est | dev | 4

    • 

  • 
尚待开发6

    • 

  • 
itaque quia est | dev | 12

    • 

  • 
illum qui provident | dev | 14

    • 

  • 
accusamus voluptas pariatur | dev | 15

    • 

  • 
dolorum voluptate ipsa |开发| 18

    • 


完成

    

  • 
完成了

    • 

  • 
奥特姆·多洛雷姆格·多洛里巴斯|完成| 2

    • 

  • 
沃鲁帕特斯必须完成9

    • 

  • 
aliquam eum et | done | 10

    • 

  • 
除完成外的其他活动11

    • 

  • 
贝塔显贵代表团|完成| 13

    • 

  • 
ullam dolorum aut |完成| 16

    • 

  • 
aut qui magni |完成| 17

    • 


制作

    

  • 
eos临时消费|生产| 3

    • 

  • 
光阑-rem et |生产| 5

    • 

  • 
et omnis explicabo |生产| 7

    • 

  • 
消费与生产

    • 

  • 
生产部门的腐败19

    • 


测试


必须在标题后添加新行，以便stackoverflow将其识别为代码的一部分，而原始html没有

试试这个。将每个列表括在一个div中，并在div上使用float:left。不要忘记在列表之后使用clear:tware

.abc{
浮动：左；
}
#清楚的{
明确：两者皆有；
}

切换导航

    

  • 

      

    • 

    • 

    • 

    • 

    • 

    

    • 


任务：
dev

    

  • 
去做吧| dev | 0

    • 

  • 
类与类开发1

    • 

  • 
autem vel est | dev | 4

    • 

  • 
尚待开发6

    • 

  • 
itaque quia est | dev | 12

    • 

  • 
illum qui provident | dev | 14

    • 

  • 
accusamus voluptas pariatur | dev | 15

    • 

  • 
dolorum voluptate ipsa |开发| 18

    • 


完成

    

  • 
完成了

    • 

  • 
奥特姆·多洛雷姆格·多洛里巴斯|完成| 2

    • 

  • 
沃鲁帕特斯必须完成9

    • 

  • 
aliquam eum et | done | 10

    • 

  • 
除完成外的其他活动11

    • 

  • 
贝塔显贵代表团|完成| 13

    • 

  • 
ullam dolorum aut |完成| 16

    • 

  • 
aut qui magni |完成| 17

    • 


生产

    

  • 
eos临时消费|生产| 3

    • 

  • 
光阑-rem et |生产| 5

    • 

  • 
et omnis explicabo |生产| 7

    • 

  • 
消费与生产

    • 

  • 
生产部门的腐败19

    • 


测试

    






工作人员：

德米特里·斯皮瓦科夫（德米特里）。spiv@gmail.com)：RoR junior|
|


--- !ruby/object:ActionController:：Parameters
参数：！ruby/hash:ActiveSupport:：HashWithInferenceTaccess
主计长：项目
行动：表演
id:'1'
允许：错误
我认为这是因为ul没有宽度参数。尝试：

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

<ul id="tasks_test" data-update-url="http://localhost:3000/projects/1/tasks/sort">
</ul>
您好，您提供的html/css没有重现该问题。请提供在屏幕截图中重现问题所需的最小呈现html和css数量。@MichaelCoker您好。添加了呈现的html片段。另外，这里是JSFIDLE上的呈现版本： 
<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>

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