list-style-position
åºçº¿
广æ³å¯ç¨
èª 2015å¹´7æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
list-style-position 屿§æå®æ è®°æ¡å¨ä¸»ä½åæ¡ä¸çä½ç½®ã
使ç¨å©è®°ç¬¦list-styleæ´æ¹ä¾¿ã
| åå§å¼ | outside |
|---|---|
| éç¨å ç´ | å表项 |
| æ¯å¦æ¯ç»§æ¿å±æ§ | æ¯ |
| 计ç®å¼ | as specified |
| å¨ç»ç±»å | 离æ£å¼ |
è¯æ³
css
/* Keyword values */
list-style-position: inside;
list-style-position: outside;
/* Global values */
list-style-position: inherit;
list-style-position: initial;
list-style-position: unset;
æ°å¼
Formal syntax
list-style-position =
inside |
outside
ä¾å
>HTML
html
<ul class="one">
List 1
<li>List Item 1-1</li>
<li>List Item 1-2</li>
<li>List Item 1-3</li>
<li>List Item 1-4</li>
</ul>
<ul class="two">
List 2
<li>List Item 2-1</li>
<li>List Item 2-2</li>
<li>List Item 2-3</li>
<li>List Item 2-4</li>
</ul>
<ul class="three">
List 3
<li>List Item 3-1</li>
<li>List Item 3-2</li>
<li>List Item 3-3</li>
<li>List Item 3-4</li>
</ul>
CSS
css
.one {
list-style: square inside;
}
.two {
list-style-position: outside;
list-style-type: circle;
}
.three {
list-style-image: url("star-solid.gif");
list-style-position: inherit;
}
Result
Specifications
| è§è |
|---|
| CSS Lists and Counters Module Level 3> # list-style-position-property> |