CODEWITHSUNDEEP
htmlcss
Chaddly
Chaddly

Reputation: 267

Stretch <a> to fill <li> in menu

Having some trouble... Any idea how I can stretch my <a>'s to fill the <li>'s they sit in?

I'm trying to make the link easier to click.

Here is my jsFiddle: http://jsfiddle.net/T9nkf/

<nav class="main-nav">
    <ul>
        <li class="menu-category"><a href="#">Link</a>
            <ul>
                <li class="menu-item"><a href="#">Topic</a></li>
                <li class="menu-item"><a href="#">Topic</a></li>
                <li class="menu-item"><a href="#">Topic</a></li>
            </ul>
        </li>
        <li class="menu-category"><a href="#">Link</a>
            <ul>
                <li class="menu-item"><a href="#">Topic</a></li>
                <li class="menu-item"><a href="#">Topic</a></li>
                <li class="menu-item"><a href="#">Topic</a></li>
                <li class="menu-item"><a href="#">Topic</a></li>
            </ul>
        </li>
        <li class="menu-category"><a href="#">Link</a>
            <ul>
                <li class="menu-item"><a href="#">Topic</a></li>
                <li class="menu-item"><a href="#">Topic</a></li>
            </ul>
        </li>
        <li class="menu-category"><a href="#">Link</a>
            <ul>
                <li class="menu-item"><a href="#">Topic</a></li>
                <li class="menu-item"><a href="#">Topic</a></li>
                <li class="menu-item"><a href="#">Topic</a></li>
                <li class="menu-item"><a href="#">Topic</a></li>
            </ul>
        </li>
    </ul>
</nav>

Upvotes: 0

Views: 296

Answers (4)

estinamir
estinamir

Reputation: 503

If you using Bootstrap there is a class called stretched-link:

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>
</div>

Upvotes: 0

Chaddly
Chaddly

Reputation: 267

Ok... figured it out! What I needed was display:inline-block;and padding:0; set on the <li>'s. Then I let the <a>'s handle all the padding, thus filling the <li> containers

Solution: http://jsfiddle.net/T9nkf/1/

Thanks for the help guys, couldn't have done it with you.

Upvotes: 0

Hive7
Hive7

Reputation: 215

I advise you to not style the li's with the items but remove all their style (apart from necessary ones and only use a elements.

Upvotes: 0

GolezTrol
GolezTrol

Reputation: 116110

The smartest thing to do is make them (the a's) display: block, but then they still don't fill your entire li, because the li contains padding. Remove the padding from the lis. Only give them a size if you need, and apply all the other markup, especially padding, to the a elements themselves.

Upvotes: 2

Related Questions