css中怎么去掉里li下划线

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

在CSS中,ul元素中的列表项默认包含下划线,如果想要去掉下划线,则可以通过以下代码实现:ul { list-style:none; padding:0; margin:0; } li { text-

在CSS中,ul元素中的列表项

  • 默认包含下划线,如果想要去掉下划线,则可以通过以下代码实现:

    ul {
      list-style:none;
      padding:0;
      margin:0;
    }
    
    li {
      text-decoration:none;
    } 

    上面的代码中,我们通过设置

      元素的list-style为none,即去掉列表项的默认标记;通过设置li元素的text-decoration为none,即去掉下划线,从而实现了去掉列表项下划线的效果。

      除了上面的代码,还可以对列表项的伪类进行设置,实现去掉下划线的效果。代码如下:

      li:hover,
      li:active,
      li:focus {
        text-decoration:none;
      } 

      上面的代码中,我们对li元素的:hover、:active、:focus伪类进行设置,使得鼠标悬停、点击、获得焦点时,列表项都不会出现下划线,达到了去掉列表项下划线的效果。

  • 文章说明:

    本文原创发布于探乎站长论坛,未经许可,禁止转载。

    题图来自Unsplash,基于CC0协议

    该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

    评论列表 评论
    发布评论

    评论: css中怎么去掉里li下划线

    粉丝

    0

    关注

    0

    收藏

    0

    已有0次打赏