CODEWITHSUNDEEP
htmlcss
wynnch
wynnch

Reputation: 545

How do I make an entire <li> element a link?

So I have a bunch of tabs that are all inside of a list element. I'm using Ruby on Rails in the View, so it looks something like this:

<div id="top-nav">
    <ul>
        <li> <%= link_to "Home", user_root_path() %> </li>
        <li> <%= link_to "Manage", manage_path() %> </li>
    </ul>
</div>

And so on.

How do I style it in CSS so that I can click on the box around the text to go to that link, instead of having to click on the text itself?

I looked at some answers and tried using display:block; inside the top-nav and li element, but it hasn't been working.

Thanks!

Upvotes: 1

Views: 1527

Answers (2)

ark
ark

Reputation: 452

You have the right idea in the wrong place. Try styling your link to be display:block, ex:

#top-nav a:link {
    display: block;
    /* padding, etc... */
}

Upvotes: 1

Arun Kumar Arjunan
Arun Kumar Arjunan

Reputation: 6857

Do the following:

 - <li> tag should have ZERO padding
 - <a> tag should have ZERO margin
 - <a> tag should have the actual padding

Upvotes: 5

Related Questions