css - 我的列表元素正在形成一个楼梯

Question

我想在我的 ul 标签之前有一个标题，但这会导致我的浏览器出现阶梯状。

我在这里阅读了 Internet Explore 中的楼梯错误 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类(class)。但是，这不适用于最后一个 <ul class="tasks> 之后的任何内容。 .相反，您可以寻找典型的“clearfix”样式并将它们应用于您的 <section>

Clearfix 看起来像这样:

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

然后，只需申请 class="clearfix"给你的<section>标签，你应该是安全的。每当您想 float 某些东西时，您应该“clearfix”容器，以获得预期的结果。

就是说，你为什么要 float 你的 <ul>排在首位？

更新 1( float /使用 flex 布局/使用表格)

好的，如果您想制作看板布局，您应该将标题与列表一起 float ，而不仅仅是列表本身。

<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没有其他地方。

但是:我强烈建议您根据自己的目的使用 flex 布局或表格。当您的屏幕太小时，您很可能会遇到 float 元素的严重问题。

我知道，很多人说“ table 太老派了”。但是，表格本身并不邪恶。表格应该用于这个目的:作为表格。您的看板基本上是一张 table 。它有列，有两行，一行带有标题，一行带有数据。为什么不这样对待它。此外，它将使您在实现过程中更加轻松。