Question

好的，所以我已经学习了大约2个月的网络编程，并且一直在上网课程，但在过去的几个星期里，我老实说仍然无法理解这个概念

点击我网站的导航页面，例如我的

  <ul class = "main-nav js--main-nav">

    <li><a href = "#">About us</a></li>
    <li><a href = "#">Sign up</a></li>

  </ul>

现在我的CSS中有

.main-nav
{
    list-style:none;
    float:right;
}

.main-nav li
{
    display:inline-block;   
}

.main-nav li a
{

    text-decoration:none;

}

你知道，我很难将我的造型放在.main-nav li或.main-nav li a之内。例如，如果我将text-decoration: none放在.main-nav li中，则无效。同样，如果我display: inline-block，它也不起作用。

我真的不明白为什么会发生什么事情，究竟是什么结构呢？为什么我不能在li元素中进行文本修饰？链接和li元素已附加，因此这看起来很奇怪。任何见解都表示赞赏。

Answer 1

＆＃13;

/*Now in my CSS I have*/
.main-nav
{
    list-style:none;
    /* float:right; */
}

.main-nav li
{
  display: inline-block;
  text-decoration: none;
}

.main-nav li a
{

    text-decoration:inherit;

}

＆＃13;

  <ul class = "main-nav js--main-nav">

    <li><a href = "#">About us</a></li>
    <li><a href = "#">Sign up</a></li>

  </ul>

＆＃13;

在上面的例子中，您将看到您确实可以在LI标记中声明text-decoration属性。您只需在A标记中声明它并继承。这样做是继承父或容器的内容。请参阅以下链接： text decoration 和 Iheritance

Mozilla开发者网络是一个很棒的资源。继续学习，最终这些东西将成为第二天性......它只需要时间。

我注释了浮动：对，因为在我的例子中不需要它。

使用类中的元素

1 个答案: