logo标签列表

如何在HTML中修改列表（有序列表和无序列表）的样式？

htmlcss
4
如何更改列表中的样式？
1. First
2. Second
3. Third

我希望我的列表看起来像这样：

1) First
2) Second
3) Third

现在的问题是如何将点号.替换为括号)或其他我们喜欢的字符？我是HTML的初学者，所以这个问题似乎很尴尬。请帮我解答这个问题。
1
这个线程可能会有用：https://dev59.com/X3VD5IYBdhLWcg3wWKLc - Balazs Koszegi
1
如果您检查我的这个答案，您会发现我已经使用CSS Content伪属性添加括号。这样做的作用是在元素之前或之后添加任何内容。您可以看一下。 - Nitesh
4个回答
5

给你。

演示

HTML代码：

<ul style="list-style-type:decimal;">
   <li>First</li>
   <li>Second</li>
   <li>Third</li>
</ul>

CSS：

li{
   position: relative;
   }
li:before{
   position: absolute;
   left: -13px;
   content: ')';
   background:white;}

希望这可以帮到您。
4
我们可以按照以下方式获取它。
<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

然后添加样式

ol {
  counter-reset: list;
}
ol li {
  list-style: none;
}
ol li:before {
  content: counter(list, decimal) ") ";
  counter-increment: list;
}
2

试试这段代码

CSS

ol{margin:0; padding:0; text-decoration:none;}
ol {list-style-type: none;}
li:before {content: "" counter(section, decimal) ") ";}
li { counter-increment: section;}

li{margin:0; padding:0; text-decoration:none; color:#ff9900; font-size:14px; font-family:arial;}

HTML

<ol>
  <li>Coffee</li>
  <li>Milk</li>
</ol>

我希望这对你有所帮助。

查看演示

2
您可以在这里尝试使用一些CSS。 content:将向您的列表编号添加项目，您还可以使用其他符号更改)。
<html>
<head>
<title>Title Here</title>
</head>

<body>
<style type="text/css">
ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
display: block;
margin-bottom: .5em;
margin-left: 2em;
}
li:before {
display: inline-block;
content: counter(item) ") ";
counter-increment: item;
width: 2em;
margin-left: -2em;
}
</style>
<ol>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ol>
</body>   
</html>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接