Question

我正在从Progate.com学习CSS（请注意，他们没有任何疑问清除论坛）并达到了我必须在练习中提供的简单布局的水平。这是一个非常流畅的学习，直到我被类选择器的CSS弄糊涂了。所以，我需要修复一些CSS，以便只有header-list中的<li>元素水平对齐。

为了做到这一点，我将代码更改为以下内容：

 body {
          font-family: "Avenir Next";
        }

        .header-list li {
          list-style: none;
           float: left;
          padding: 33px 20px;
        }

        .header {
          background-color: #26d0c9;
          color: #fff;
          height: 90px;
        }

        .header-logo {
          float: left;
          font-size: 36px;
          padding: 20px 40px;
        }

        .header-list {
          float: left;
        }

        .main {
          background-color: #bdf7f1;
          height: 600px;
        }

        .footer {
          background-color: #ceccf3;
          height: 270px;
        }

这给了我他们在答案中想要的结果。但是，当我尝试提交答案时，弹出一个弹出窗口说

应删除<li>元素的float属性的CSS。

所以，为了理解为什么需要这样做，我再次重新阅读他们的指示，并说明：

重写为<li>元素指定的以下属性，以便它们仅应用于header-list内的<li>元素。：

float: left;


padding: 33px 20px;

因此，在这里我很困惑为什么要编写如下代码以使自己进入下一阶段是非常必要的：

          body {
          font-family: "Avenir Next";
        }

        .header-list li {
          list-style: none;
        /* CSS properties from here are moved to line 32. But why? 
      We still get the required result without doing so.             
      */
        }

        .header {
          background-color: #26d0c9;
          color: #fff;
          height: 90px;
        }

        .header-logo {
          float: left;
          font-size: 36px;
          padding: 20px 40px;
        }

        .header-list {
          float: left;
        }

        /* Added -> CSS for <li> tags within header-list
        (CONFUSION: The float and padding property could have been applied in the first .header-list li{}.
        But I didn't understand why the same has been told to do again below)


        */
        .header-list li {
          float: left;
          padding: 33px 20px;
        }

        .main {
          background-color: #bdf7f1;
          height: 600px;
        }

        .footer {
          background-color: #ceccf3;
          height: 270px;
        }

我在互联网上搜索以获得相同的线索。但我认为，作为初学者，很难清除较小的概念。因此，我把它带到了我们的救世主论坛 - Stackoverflow。关于这一点的一些帮助或提示将不胜感激。

Answer 1

您可能希望尝试使用display: inline;，并删除浮点数。你在上面说过，他们提到了

The CSS for the float property of <li> elements should be deleted.

这是在不使用浮点数的情况下水平显示列表的另一种方法。希望这有帮助！

我强烈建议您在YouTube上查看The Net Ninja。他是一位了不起的老师，你会学到很多东西，而且他非常努力，让你很容易掌握这些概念。查看他的频道上的播放列表，他有一些html，CSS和更多！ https://www.youtube.com/watch?v=I9XRrlOOazo&list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

在CSS

1 个答案: