当前位置:  开发笔记 > 前端 > 正文

需要一个没有任何子弹的无序列表

如何解决《需要一个没有任何子弹的无序列表》经验,为你挑选了13个好方法。

我创建了一个无序列表.我觉得无序列表中的子弹很麻烦,所以我想删除它们.

是否有可能没有子弹的列表?



1> Paul Dixon..:

您可以通过在父元素的CSS上设置list-style-typeto 来删除项目符号none(通常为a

    ),例如:

    ul {
      list-style-type: none;
    }
    

    如果您还想删除缩进,您可能还想添加padding: 0margin: 0.

    有关列表格式化技术的精彩演练,请参阅列表教程.


    哦,我有多少次回到这里进行复制/粘贴了:)

    2> Scott Staffo..:

    如果你正在使用Bootstrap,它有一个"没有样式"的类:

    删除列表项上的默认列表样式和左边距(仅限直接子项).

    Bootstrap 2:

    • ...

    http://twitter.github.io/bootstrap/base-css.html#typography

    Bootstrap 3和4:

    • ...

    http://getbootstrap.com/css/#type-lists


    实际上,这个答案正是我所寻找的.并且Bootstrap被整个互联网的3.6%使用,所以它不会下降.https://trends.builtwith.com/docinfo/Twitter-Bootstrap快速谷歌搜索显示,Bootstrap始终位于"最受欢迎的CSS框架"类别中.

    3> karim79..:

    你需要使用 list-style: none;

    • ...


    请注意,内联css会覆盖文件中的css。取决于应用程序/开发实践,这可能会很烦人。

    4> Haim Evgi..:

    在css,风格,

     list-style-type: none;
    



    5> DanO..:

    您必须为

      元素添加样式,如下所示:

      • Item
      • ...
      • Item

      这将删除子弹.您还可以在样式表中添加CSS,如上例所示.



      6> Tim Hoolihan..:

      在css ...

      ul {
         list-style: none;
      }
      



      7> 小智..:

      对上述内容的细化:如果更长的线条溢出到其他屏幕线,则使更长的线条更具可读性:

      ul, li {list-style-type: none;}
      
      li {padding-left: 2em; text-indent: -2em;}
      



      8> Ole Spaarman..:

      使用以下CSS:

      ul {
        list-style-type: none
      }
      



      9> Cody..:

      本机:

      ul { list-style-type: none; }
      

      引导:

      • ...

      注意:如果您使用的是列表组,则不需要列表 - 无样式.



      10> Antonio Ooi..:

      如果您无法使其在该

        级别上运行,则可能需要将其置于list-style-type: none;
      • 级别:

        • Item 1
        • Item 2

        您可以创建一个CSS类来避免这种重复:

        
        
        
        • Item 1
        • Item 2

        编辑:必要时,使用!important:

        
        



        11> Chris Halcro..:

        我在ul和li上都使用了list-style来删除子弹.我想用自定义角色替换子弹,在这种情况下是"破折号",这会产生很好的效果.所以使用这个标记:

        • text
        • text

        用这个css:

        ul.dashed-list
        {
            list-style: none outside none;
        }
        
        ul.dashed-list li:before {
            content: "\2014";
            float: left;
            margin: 0 0 0 -27px;
            padding: 0;
        }
        
        ul.dashed-list li {
            list-style-type: none;
        }
        

        给出一个很好的缩进效果,当文本换行时有效



        12> 小智..:

        CSS:

        .liststyle {
            list-style-type: none;
        }
        

        HTML:

        • Test



        13> Masih Jahang..:

        要完全删除ul默认样式:

            list-style-type: none;
        
            margin: 0;
            margin-block-start: 0;
            margin-block-end: 0;
            margin-inline-start: 0;
            margin-inline-end: 0;
            padding-inline-start: 0;
        

推荐阅读
mobiledu2402851173
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有