HTML CSS examples for CSS Widget:OL
Align list item relative to ordered list number
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!--from w w w.jav a2s . c o m--> padding:51px; } .blog-entry { padding-left:33px; position:relative; width:249px; } .blog-entry ol { color:Chartreuse; font:italic 4em Arial,sans-serif; list-style-type:decimal; } .blog-entry ol li { position:relative; margin-top:-13px; } .blog-entry h4.title { position:absolute; top:6px; color:yellow; font-family:Arial,sans-serif; font-size:17px; padding-left:26px; padding-right:34px; text-shadow:none; vertical-algin:bottom; } </style> </head> <body> <div class="blog-entry"> <ol> <li> <h4 class="title"> <a href="">10 moments in cinematic history changing thus</a> </h4> </li> <li> <h4 class="title"> <a href="">Testing this theme with image</a> </h4> </li> <li> <h4 class="title"> <a href="">More experimental testings</a> </h4> </li> <li> <h4 class="title"> <a href="">The video that defined a new definition</a> </h4> </li> </ol> </div> </body> </html>