html有序列表改成汉字,如何在HTML中修改列表(有序列表和無序列表)中的樣式?

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.

我是HTML初學者，所以這個問題看起來很尷尬。請幫我解答這個問題。

4 个解决方案

#1

5

Here you go.

給你。

演示工作

The HTML:

HTML:

• First
• Second
• Third

The CSS:

CSS:

li{

position: relative;

}

li:before{

position: absolute;

left: -13px;

content: ')';

background:white;}

Hope this helps.

希望這個有幫助。

#2

3

We can get it by doing as follows

我們可以這樣做

1. First
2. Second
3. Third

and then adding style

然后添加樣式

ol {

counter-reset: list;

}

ol li {

list-style: none;

}

ol li:before {

content: counter(list, decimal) ") ";

counter-increment: list;

}

#3

2

try this code

試試這個代碼

CSS

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

HTML

1. Coffee
2. Milk

I Hope this is helps to you.

我希望這對你有幫助。

看到演示

#4

2

You can try this with some css here content: will add item to your listing number, you can also change ) with other symbols

您可以在這里使用一些css內容:將添加條目到您的列表號，您也可以更改)與其他符號。

Title Here

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;

}

1. First
2. Second
3. Third