[英]How to modify the style in list(ordered list and unordered list) in HTML?
如何更改列表中的样式?
1. First
2. Second
3. Third
我希望我的列表看起来像
1) First
2) Second
3) Third
现在的问题是如何改变点.
括号)
或我们喜欢的东西?
我是HTML的初学者,所以问题似乎很尴尬。 请帮我解决这个问题。
干得好。
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;}
希望这可以帮助。
我们可以通过以下方式获得它
<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;
}
试试这段代码
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>
我希望这对你有所帮助。
你可以尝试使用这里的一些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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.