如果不使用图像，是否可以为HTML列表选择不同的形状而不是圆形？

  • Z时代
  • 2024-01-10
  • 分类：问答

最好寻找一个三角形来代替圆。我宁可不使用图像，但如果没有其他方式，我会。如果不使用图像，是否可以为HTML列表选择不同的形状而不是圆形？

回答：

JSFiddle of triangle bullets

希望这是什么意思？

CSS：

.ul1 { 
    margin: 0.75em 0; 
    padding: 0 1em; 
    list-style: none; 
} 
.li1:before { 
    content: ""; 
    border-color: transparent #111; 
    border-style: solid; 
    border-width: 0.35em 0 0.35em 0.45em; 
    display: block; 
    height: 0; 
    width: 0; 
    left: -1em; 
    top: 0.9em; 
    position: relative; 
}

回答：

是。这是一些工作不过，如果你想使用圆形或正方形:)其他东西

参见：http://alistapart.com/article/taminglists

我的文章链接描述了通过第一剥离原来的标记这样做：

ul.custom-list { 
list-style: none; 
margin-left: 0; 
padding-left: 1em; 
text-indent: -1em; 
}

然后，他们添加使用伪选择“前”，和注射的内容自定义子弹成：

ul.custom-list li:before { 
content: "\0BB \020"; 
}

在这种情况下，他们是用它来包含“双人字形”符号。您可以查找任何想要注入的符号代码。

回答：

是的，你可以使用

list-style

样式属性这一点。

回答：

不幸的是，没有三角形可用作标准标记。 list-style-type的值的完整列表可以找到here。

回答：

是的。看一下这个。您可以使用CSS礼这里discribed

http://www.w3schools.com/cssref/playit.asp?filename=playcss_ol_list-style-type&preval=cjk-ideographic

回答：

如果你想在你的无序列表为一个三角形的简单（无痛）的解决方案，那么你可以使用此方法。我只是写了一个小提琴，CSS给你一个UL列表，每个项目都标有右侧三角形而不是圆形子弹。

这是你之后？

http://jsfiddle.net/CU5Ry/

HTML：

<ul> 
    <li>List Item 1</li> 
    <li>List Item 2</li> 
    <li>List Item 3</li> 
</ul>

CSS：

ul { 
    list-style: none; 
} 
ul li:before { 
    content: "\25BA \0020"; 
}

以上是 如果不使用图像，是否可以为HTML列表选择不同的形状而不是圆形？ 的全部内容， 来源链接： utcz.com/qa/263085.html

回到顶部