时间戳

首页 > 解决方案 > CSS中类选择器使用的困惑

html - CSS中类选择器使用的困惑

问题描述

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

为此，我将代码更改为以下内容：

 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;
        }

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

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

因此，为了了解为什么需要这样做，我再次阅读了他们的说明，并指出：

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

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。一些有关相同的帮助或提示将不胜感激。

标签： htmlcss

解决方案

您可能想尝试使用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

推荐阅读