Question

我想在ul标记前添加标题，但这会导致浏览器出现问题。

我在https://www.sanwebe.com/2015/03/15-common-css-bugs-and-their-easy-fixes处浏览了互联网上的楼梯错误，但我使用的是chrome。

这是我的html代码：

     <asp:Label CssClass="listHeading" ID="Label1" runat="server" Text="Label"> 
     </asp:Label>
     <section>
  <ul class="tasks">
       <li class="elem">
        </li>
         <li class="elem"></li>
         <li class="elem"></li>
       </ul>
     </section>
     <asp:Label CssClass="listHeading" ID="Label2" runat="server" Text="Label"></asp:Label>
<section>
  <ul class="tasks">
  </ul>
</section>
     <asp:Label CssClass="listHeading" ID="Label3" runat="server" Text="Label"></asp:Label>
<section>
  <ul class="tasks">
  </ul>
</section>

and here is my css code:

    .listHeading {
         font-weight: normal;
         float:none;
         text-align:unset;
         margin-left:4%;
    }
    .tasks{
         float:left;
         margin-top:40px;
         background-color:#ccf;
         margin:0 5px;
         padding:10px;
         width:14%;
         min-height:60px; 
         border:1px solid #669;
     }
    .elem{
         list-style-type:none;
         margin-bottom:5px;
         padding:0 10px;
         background-color:#fff;
         border:1px solid #99c;
         font-size:100%;
         height:100%;
         line-height:48px; 
        width:90%;
     }
     .on_tasks{
        list-style-type:none;
        margin-bottom:5px;
        height:100%;
        width:50%;
        background-color:#eef;
        margin-top:40%;
      }

Answer 1

您可以尝试添加一个

clear: left;

进入您的.listHeading类。但是，这不适用于最后<ul class="tasks>之后的任何内容。相反，您可以查找典型的“ clearfix”样式并将其应用于您的<section>。

Clearfix看起来像这样：

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

然后，只需将class="clearfix"应用于您的<section>标签，就应该安全了。每当您想漂浮一些东西时，都应该“清除”容器，以得到预期的结果。

也就是说，为什么首先要浮动<ul>？

更新1（浮动/使用弹性布局/使用表格）

好吧，如果要制作看板布局，则应将标题与列表一起浮动，而不仅仅是列表本身。

<div class="kanban-column">
  <label>Col 1</label>
  <ul>
    <li>...</li>
  </ul>
</div>
<div class="kanban-column">
  <label>Col 2</label>
  <ul>
    <li>...</li>
  </ul>
</div>

然后仅将float: left应用于.kanban-column，然后在其他任何地方使用。

但是：我强烈建议您使用弹性布局或表格来达到目的。当屏幕太小时，很可能会遇到漂浮物的严重麻烦。

我知道，很多人都说“桌子太老了”。但是，桌子本身并不是邪恶的。表格应完全用于此目的：作为表格。而且您的看板基本上是一张桌子。它有列，有两行，一行带有标题，另一行带有数据。为什么不这样对待呢。另外，这将使您的实施过程变得更加轻松。

我的清单元素正在形成阶梯

1 个答案: