简体   繁体   中英

How can I replicate a <ol><li> bullet list in HTML with indents that line up correctly?

I need an HTML alphabetical bulleted list which will be used quite frequently. This is something that is not supported with Google sites, which I use all the time for work...can you manually replicate a HTML bulleted list?

So far my indents don't match up because I am using fixed margins and the alphabetical characters all have unique dimensions in pixels:

 <div style="display:inline"> <b style="text-align:left">Enter your list title here</b> <span style="display:block;margin-left:40px"> <p style="font-size:0.85em;font-weight:normal"><b style="margin-right:1em">a.</b>Enter your list description here</p> <p style="font-size:0.85em;font-weight:normal"><b style="margin-right:1em">b.</b>Enter your list description here</p> <p style="font-size:0.85em;font-weight:normal"><b style="margin-right:1em">c.</b>Enter your list description here</p> <p style="font-size:0.85em;font-weight:normal"><b style="margin-right:1em">d.</b>Enter your list description here</p> <p style="font-size:0.85em;font-weight:normal"><b style="margin-right:1em">e.</b>Enter your list description here</p> <p style="font-size:0.85em;font-weight:normal"><b style="margin-right:1em">f.</b>Enter your list description here</p> <p style="font-size:0.85em;font-weight:normal"><b style="margin-right:1em">g.</b>Enter your list description here</p> </span> </div> 

 <ol type="a"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ol> 

Ordered Lists already supports various methods for how the list is defined (Numbers, alphabet, roman numerals, etc). This can also be modified using CSS list-style-type .

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol

https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

Since Google Sites have some limitations, I'm not sure if you're using a HTML Box or editing the HTML source of the Google Page, but you can use the HTML style attribute with following syntax:

 <ol style="list-style-type:lower-alpha"> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> </ol> 

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM