1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2009
    Rep Power

    Make <li> labels clickable in an <ol>

    This seems so simple, yet my hour of searching has yeilded nothing!!

    I simply want to make the numbers that appear for each <li> to be clickable.

    I tried moving the ,a> tags outside the <li>, but that doesn't work.

    I tried (to no avail) in CSS:
    li a {list-style-position:inside; }
    ans: ol li a {list-style-position:inside; }

    also i added a property that enabled me to click anwhere to the right of the number across the whole page, but I forgot now what that was.

    In the simplest illustration, I would like to be able to click on the no. 1 from the HTML code below.

    <li><a href="#a1" /></li>
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Rep Power
    The reason it's not clickable is because the number is part of the <li> and the clickable part is the <a>. You can either use some javascript to make the element clickable, or you could use some CSS kajiggery:

    <!DOCTYPE html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    	OL A {margin-left: -20px; padding-left: 20px; border: 1px solid black}
        <li><a href="#a1">test</a></li>
        <li><a href="#a2">test</a></li>
        <li><a href="#a3">test</a></li>
        <li><a href="#a4">test</a></li>

IMN logo majestic logo threadwatch logo seochat tools logo