4

リストのスタイルを変更するにはどうすればよいですか?

1. First
2. Second
3. Third

リスティングを次のように表示したい

1) First
2) Second
3) Third

問題は、ドット.を括弧)または好きなものに変更する方法です??

私はHTMLの初心者なので、質問はかなり厄介です。この質問で私を助けてください。

4

4 に答える 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;}

お役に立てれば。

于 2013-09-05T06:42:32.520 に答える
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;
}
于 2013-09-05T06:44:02.667 に答える
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>
于 2013-09-05T07:35:43.937 に答える
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>

これがお役に立てば幸いです。

デモを見る

于 2013-09-05T06:56:48.980 に答える