CODEWITHSUNDEEP
htmlcss
Billy Ferguson
Billy Ferguson

Reputation: 1439

How to make entire link clickable in an unordered list

I have an unordered list of links and I need to make the whole list item clickable.

<li><a href="blah">This</a></li>

https://jsfiddle.net/69wzksdq/1/

Upvotes: 0

Views: 548

Answers (3)

chriskirknielsen
chriskirknielsen

Reputation: 2929

The issue you have is that padding is being applied to your li elements. Here is a fiddle with the whole area being clickable (simplified your border-bottom rule as well): https://jsfiddle.net/eowznujs/

Upvotes: 3

wired
wired

Reputation: 438

There you go:

 #groupchats ul {
        list-style-type: none;
    }

    #groupchats li{
      border-bottom:1.5px solid #69f0ae;
      background-color: #006064;
      display: block;
      padding: 0;
    }
    #groupchats li:last-child { border-bottom: none; }

    #groupchats li a {
      text-decoration: none;
      display: inline-block;
      width: 100%;
      padding: 16px;
      color: white;
    }
    <div class="row col-md-8 col-md-offset-2" id="groupchats">


  <div id="groupchat-errors">


  </div>
    <ul id="groupchat-index" "demo-list-item mdl-list"> 
      <li class="mdl-list__item"><a href="/groupchats/estset">one</a></li>
<li class="mdl-list__item"><a href="/groupchats/meandjess">two</a></li>
<li class="mdl-list__item"><a href="/groupchats/nooooo">three</a></li>

</div>

Upvotes: 1

Eduard Void
Eduard Void

Reputation: 2714

use the css

li a {
  display: inline-block;
  width: 100%;
}

now I see, that you know this. your problem is padding on li element. just assign padding: 0 to the li element and apply padding to the li a selector like this

li { padding: 0 }
li a { padding: 16px; }

Upvotes: 1

Related Questions