style - html引用css




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

CSS代码

ul
{
list-style-type: none;
}

HTML代码

<ul>
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>   
</ul>

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

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


CSS:

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

HTML:

<ul class="liststyle">
    <li>Test</li>
</ul>

下面的代码是一个很好的简单示例,用于删除无序列表的项目符号

<!DOCTYPE html>
<html>
<body>

<h2>Unordered List without Bullets</h2>

<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

</body>
</html>

你可以试试这个

ul {
  list-style: none
}
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ul>


你需要使用css list-style-type:none;

ul {
  list-style-type: none;
}


使用以下CSS:

ul {
  list-style-type: none
}

只需将类中的list-style-typelist-style更改为<li>

像这样的东西:

li {
  list-style-type : none;
}

另外,为了获得更多信息,我列出了您可以分配给list-style-type所有属性,运行下面的代码以查看一个目标中的所有结果:

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

.disc {
  list-style-type: disc;
}

.circle {
  list-style-type: circle;
}

.square {
  list-style-type: square;
}

.decimal {
  list-style-type: decimal;
}

.georgian {
  list-style-type: georgian;
}

.cjk-ideographic {
  list-style-type: cjk-ideographic;
}

.kannada {
  list-style-type: kannada;
}

.custom:before {
  content: '◊ ';
  color: red;
}
<ul>
  <li class="none">none</li>
  <li class="disc">disc</li>
  <li class="circle">circle</li>
  <li class="square">square</li>
  <li class="decimal">decimal</li>
  <li class="georgian">georgian</li>
  <li class="cjk-ideographic">cjk-ideographic</li>
  <li class="kannada">kannada</li>
  <li class="none custom">custom</li>
</ul>


在css ...

ul {
   list-style:none;
}

如前所述,最好的方法是在ul元素中添加list-style-type: none 。 关于子弹样式有一篇很棒的文章,我想你可以从here受益。


如果你想在不诉诸CSS的情况下保持简单,我只需要放一个&nbsp; 在我的代码行中。 即<table></table>是的,它留下了一些空间,但这不是坏事。



如果您只想使用 HTML实现此目标,此解决方案将适用于所有主流浏览器:

说明列表

只需使用以下HTML:

<dl>
  <dt>List Item 1</dt>
    <dd>Sub-Item 1.1</dd>
  <dt>List Item 2</dt>
    <dd>Sub-Item 2.1</dd>
    <dd>Sub-Item 2.2</dd>
    <dd>Sub-Item 2.3</dd>
  <dt>List Item 3</dt>
    <dd>Sub-Item 3.1</dd>
</dl>

这将产生类似于以下的列表:

List Item 1
     Sub-Item 1.1
List Item 2
     Sub-Item 2.1
     Sub-Item 2.2
     Sub-Item 2.3
List Item 3
     Sub-Item 3.1

示例: https://jsfiddle.net/zumcmvma/2/https://jsfiddle.net/zumcmvma/2/

参考: https://www.w3schools.com/tags/tag_dl.asphttps://www.w3schools.com/tags/tag_dl.asp


您可以使用style="list-style-type:none"删除项目符号。

试试这个:

<ul style="list-style-type:none" >

     <li>op1</li>
     <li>op2</li>
     <li>op2</li>

</ul> 

您可以使用以下CSS删除项目符号

    ul {
         list-style: none; //or list-style-type:none; 
       }

您甚至可以添加自定义列表样式,如:

li:before {
            content: '✔';
            color:red;
          }

您必须向<ul>元素添加样式,如下所示:

<ul style="list-style: none; ">
    <li>Item</li>
    ...
    <li>Item</li>
</ul>

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


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

<ul class="dashed-list">
  <li>text</li>
  <li>text</li>
</ul>

用这个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;
}

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


此订单列表垂直没有项目符号。 只需一行!

 li{
        display: block;
    }

您可以通过在父元素的CSS(通常是<ul> )上将list-style-typenone来删除项目符号,例如:

ul {
  list-style-type: none;
}

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

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





css