Setting a link to an <li> instead of just Text [duplicate]

This question already has answers here: Closed 11 years ago.

Possible Duplicate:

Navigation hyperlinks only work when mouse is on the text

Can you set a link to the whole width of an < li > instead of just where t开发者_如何学运维he text is?

This is what I mean, I want the user to be able to click on anywhere on the button and go to the link and not just the text: http://jsfiddle.net/b7S4L/

One of the problems is that I cannot use display: block; because I have a number after the < a > link for example (1)

---

Don't style the LI at all, (other than float:left and clearing padding, marging and list-style-type) if needed. Put all styling on the A (and use display:block).

---

I don't want the number on the right to be on a seperate line that's the problem, it should be on the right of the Text

I think I understand what you're trying to do here. Though, I'm not sure because your question has been quite confusing..

First, do set display: block on the a. That is the right thing to do here.

Then, move the number inside the a, and add a span inside:

<li class="cat-item cat-item-147">
    <a href="http://test.vps.graenseguiden.dk/newscat/food/" title="Vis alle indl&#230;g i kategorien Food">
        <span>Food</span> (4)
    </a>
</li>

Then, some extra CSS is needed. You should merge the new CSS with what you already have - for the demo, I've added it within the HTML pane for simplicity (marked with <!--new css right here-->):

http://jsfiddle.net/thirtydot/b7S4L/3/

div.gg_newscats li a {
    display: block;
    padding: 16px 0;
    color: #333
}
div.gg_newscats ul li {
    padding-top: 0;
    padding-bottom: 0
}
div.gg_newscats li a span {
    color: #cc0014
}
div.gg_newscats li a:hover {
    text-decoration: none
}
div.gg_newscats li a:hover span {
    text-decoration: underline
}

The messing around with span and :hover is to keep the colour and underline exactly as you had it.

---

Anchor tags by default are inline boxes, which means that they don't fill their parent entirely (they don't take all the space) and they shrink only to fit their content. Thus you should use this CSS to make'em fill the space of li element:

li a
{
   display: block;
   height: 100%;
}

Also keep in mind that you should remove any padding from the li elements and remove margins of a elements. This way, border of anchor tags meet borders of li tags. For an example, look at links of Thought Results.

---

One solution I tend to use is to make the <a /> element within a <li /> element blocklevel with

display: block;

After that removing any padding you specified on the <li /> element and add it on the <a /> element instead and you should get the same visual output, but with the entire <li /> as a link

---

While you can manage this with jQuery, you can also use simple CSS for most browsers:

<style>
ul { width: 200px; background: #ccc; }
li { line-height: 3em; }
a { display: block; width: 100%; height: 100%; padding: 5px; }
</style>
<ul>
<li><a href="#">This is a link</a></li>
</ul>

---

Add display:block; to the style and you're all set!

EDIT

Eh, didn't see the jsFiddle example. If you remove the top/bottom padding from the LIs and put it on the As, plus put the count in a SPAN within the As, these rules will achieve the desired result:

div.gg_newscats a {
    display: block;
    height: 100%;
    padding: 10px;
}
div.gg_newscats a span {
    color: black;
}
div.gg_newscats ul li {
    float: left;
    font-size: 13px;
    margin-left: 2%;
    margin-top: 2px;
    text-align: center;
    width: 30%;
    padding: 2px;
}

Sample HTML:

<li class="cat-item cat-item-148">
  <a title="Vis alle indlæg i kategorien Electrical" href="http://test.vps.graenseguiden.dk/newscat/electrical/">
    Electrical
    <br>
    <span>(1)</span>
  </a>
</li>

---

Edit 2

new code... a lot simpler... only thing that didn't go the way I liked was that the text-decoration of the link had to go.

.cat-item
{
    padding: 0px;
}

.cat-item a
{
    padding: 13px 0px 13px 0px;
}

.cat-item span
{
    margin-left: 5px;
    color: black;
}

.cat-item a:hover
{
    text-decoration:none;
}

I had to change the markup just a little (put the numbers in a span) but other than that it wasn't too much

demo here: http://jsfiddle.net/ZW6uV/1

had to tack on !important because of a conflicting imported style sheet.

Edit

Readers Digest version: Don't put your padding on the <li> ... ever. Put padding on the <a> within the <li> and then it will fill the empty space and have the same effect but be able to handle the click also. -snip-

---

Yes just remove any padding from the LI element and push out the padding as needed on the anchor tag

<li class="link-wrapper">
  <a href="http://this.com" >Go Here</a>
</li> 

CSS

.link-wrapper{ 
  margin: 0;
  padding: 0;
 }

.link-wrapper a{
  display: block;
  padding: 3px 5px;
}

---

Since you are using jQuery, you can do it this way:

$("li.cat-item").click(function () {
    $("a", this).click();
    return false;
});