How to modify the style in list(ordered list and unordered list) in HTML?
Question
How can I change the style in list?
1. First
2. Second
3. Third
I want my listing to look something like
1) First
2) Second
3) Third
Now the question is how to change dot . to parenthesis ) or something we like??
I am beginner to HTML so the question seem a quite awkward. Please help me with this question.
4 answers
solution1
5 ACCPTED 2013-09-05 06:42:32
Here you go.
The HTML:
<ul style="list-style-type:decimal;">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
The CSS:
li{
position: relative;
}
li:before{
position: absolute;
left: -13px;
content: ')';
background:white;}
Hope this helps.
solution2
3 2013-09-05 06:44:02
We can get it by doing as follows
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
and then adding style
ol {
counter-reset: list;
}
ol li {
list-style: none;
}
ol li:before {
content: counter(list, decimal) ") ";
counter-increment: list;
}
solution3
2 2013-09-05 06:56:48
try this code
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>
I Hope this is helps to you.
solution4
2 2013-09-05 07:35:43
You can try this with some css here content: will add item to your listing number, you can also change ) with other symbols
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.