html - Css float : left; drops further on every item

标签 html css ruby-on-rails sass

跨界

 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 是否导致此问题。此外，检查我是否可以在 View 循环中随机生成额外的新行，或者列表值是否可以包含它。

坠落截图http://i.imgur.com/E3pZr4s.png (测试列表为空)
奇怪的是，如果我申请 float: left;在列表元素上，它们不会下拉 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 没有任何内容。

最佳答案

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

.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>

关于html - Css float : left; drops further on every item，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43618546/

上一篇：jquery - 如何暂停正在运行的动画并使用jquery中的一个按钮运行另一个动画

下一篇：css - 在图像上填充

相关文章：

php - 在 php 中使用 while 循环创建图像表，最后一个条目回显到错误的位置

javascript - 使用 javascript 在 Html 页面上预防 XSS

html - 替代 HTML 中的 <table> 布局

html - Google CSE 多个搜索栏问题

php - 使用数组获取所有信息时如何突出显示表格行？

javascript - Ruby on Rails 运行 javascript 代码

html - 设置 Bootstrap 中复选框所需的属性

javascript - 如何检查页面中的某个位置？

ruby-on-rails - Rails CANCAN - 第一次点击无访问权限

ruby-on-rails - 尝试关注一本书，但没有生成我的表格，这是为什么？

©2024 IT工具网  联系我们