OL when you define a sequence table, text and leader characters are indented unless you specify List-style-position:inside.
But sometimes, OL defined list types have restrictions, such as the definition of Chinese characters "one, two or three", we have to manually enter these characters, but this text and character fonts together.
Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title>first-letter</title> <style type=" Text/css "> body{font-size:12px; Width:600px;margin:2em Auto;} </style> </pead> <body> <ol> <li> was originally called the box model acid test, which is a Web page for testing browsers. Developed in October 1998, it became an important guideline for measuring early-stage browser compatibility, especially the browser's support for cascading style Sheet 1.0. As with acid tests to quickly and intuitively measure the quality of a piece of metal, the goal of the Web page acid test is to provide a way to clearly indicate whether the browser complies with WEB standards. </li> <li> This version is designed for integrated tests that support HTML, CSS 2.0, and PNG image [1] standards, which are created by the Web page Standard Planning Group (Web Standards Project). </li> <li> was officially released on March 3, 2008 with its testing focus on ECMAScript, DOM level 3, Media queries and data:url[3]. When you open this test page in a browser, the page will continue to load the function [4] and give a score of 100 points </li> </ol> <pr/> <ol style= "List-style:none" according to the test situation. > <li> One, originally called box model acid test, is a Web page for testing browsers. Developed in October 1998, it became an important guideline for measuring early-stage browser compatibility, especially the browser's support for cascading style Sheet 1.0. It's like using acid tests to quickly andTo measure the quality of a piece of metal intuitively, the goal of the web acid test is to provide a way to clearly indicate whether the browser complies with WEB standards. </li> <li> II, this edition is designed for integrated tests that support the HTML, CSS 2.0, and PNG image [1] standards, and are developed by the Web page Standard Planning Group (Web Standards Project). </li> <li> III, March 3, 2008 officially released, its testing focus on ECMAScript, DOM level 3, Media queries and data:url[3]. After you open this test page in a browser, the page will continue to load the function [4] and give a score of 100 points according to the test situation </li> </ol> </body> </ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
This time you can use the pseudo class First-letter to help:
Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title>first-letter</title> <style type=" Text/css "> body{font-size:12px; Width:600px;margin:2em Auto;} ol.list {List-style:none} ol.list li:first-letter {margin-left:-2em;color:blue;font-weight:bold;} </style> </pead> <body> <ol> <li>, originally known as Box model acid test, is a Web page for testing browsers. Developed in October 1998, it became an important guideline for measuring early-stage browser compatibility, especially the browser's support for cascading style Sheet 1.0. As with acid tests to quickly and intuitively measure the quality of a piece of metal, the goal of the Web page acid test is to provide a way to clearly indicate whether the browser complies with WEB standards. </li> <li> This version is designed for integrated tests that support HTML, CSS 2.0, and PNG image [1] standards, which are created by the Web page Standard Planning Group (Web Standards Project). </li> <li> was officially released on March 3, 2008 with its testing focus on ECMAScript, DOM level 3, Media queries and data:url[3]. After you open this test page in a browser, the page will continue to load the function [4] and give the score according to the test situation, full score of 100 points </li> </ol> <pr/> <ol class= "List" > <li> a, originally called the box model acid test, is a Web page for testing browsers. Developed in October 1998, it became an important guideline for measuring early-stage browser compatibility, especially the browser's support for cascading style Sheet 1.0. As with acid tests to quickly and intuitively measure the quality of a piece of metal, the goal of the Web page acid test is to provide a way to clearly indicate whether the browser complies with WEB standards. </li> <li> II, this edition is designed for integrated tests that support the HTML, CSS 2.0, and PNG image [1] standards, and are developed by the Web page Standard Planning Group (Web Standards Project). </li> <li> III, March 3, 2008 officially released, its testing focus on ECMAScript, DOM level 3, Media queries and data:url[3]. After you open this test page in a browser, the page will continue to load the function [4] and give the score according to the test situation, full score of 100 points </li> </ol> <pr/> <ol class= "List" > <li> one , originally called the box model acid test, is a Web page for testing browsers. Developed in October 1998, it became an important guideline for measuring early-stage browser compatibility, especially the browser's support for cascading style Sheet 1.0. As with acid tests to quickly and intuitively measure the quality of a piece of metal, the goal of the Web page acid test is to provide a way to clearly indicate whether the browser complies with WEB standards. </li> <li>, this version is for comprehensive testing that supports HTML, CSS 2.0, and PNG image [1] standards, designed by the Web page Standard Planning Group (Web Standards Project). </li> <li> March 3, 2008, the official release of the test focused on ECMAScript, DOM level 3, Media queries and data:url[3]. After you open this test page in a browser, the page will continue to load the function [4] and give a score of 100 points according to the test situation </li> </ol> </body> </ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run] rendering results:
This allows the leader to keep a certain distance from the text and to control more styles.
However, the comma behind the leader will not control the style, but I would like to set the background map to replace it?
Simple test found that the control of the First-letter pseudo-class background, and control of the list-style-image as people can not penetrate, and abandoned.
Also, each browser treats the symbol next to the leader differently, because Safari is not installed, so it is not tested:
Code:
IE8 and FF3 and opera are consistent, chrome only to the left side of the symbol processing, IE6, 7, only processing the first character.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
