CODEWITHSUNDEEP
javascripthtmlcss
artifc3
artifc3

Reputation: 77

Anchor Tag is Clickable Across Width of Screen

I am working on a small app and have found a strange bug. I am currently using anchor tags to represent buttons in my app, I could change these to actual buttons instead, but I've decided to stick with anchors for now.

However, I've noticed that the anchor tags are clickable across the entire width of the screen. Could someone please point out why this is occurring? I am assuming it is something wrong with my CSS.

Please see below for an example.

#commentList {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display:block;
}

#commentList li a {
  width: 364px; 
  border: 1px solid #ddd;
  margin-top: -1px;
  background-color: #f6f6f6; 
  padding: 12px;
  text-decoration: none;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  display: block;
}
<ul id="commentList">
  <li onclick=functionA() title="Activate function A."><a href="#" >Function A</a></li>
  <li onclick=functionB() title="Activate function B."><a href="#" >Function B</a></li>
  <li onclick=functionC() title="Activate function B."><a href="#" >Function C</a></li>
</ul>

Upvotes: 0

Views: 825

Answers (3)

lucian
lucian

Reputation: 681

On the a tag, instead of display: block; do display: inline-block;

Upvotes: 0

Johannes
Johannes

Reputation: 67748

That's because your onclick=functionA() is on the li tag, not on the anchor tag, and the lis span the whole width since they are block elements without a width setting.

Upvotes: 2

EGC
EGC

Reputation: 1779

I think this is your issue:

Change: 

#commentList li a {
      width: 364px; 
      border: 1px solid #ddd;
      margin-top: -1px;
      background-color: #f6f6f6; 
      padding: 12px;
      text-decoration: none;
      font-size: 14px;
      font-family: Arial, Helvetica, sans-serif;
      color: black;
      display: block;    
    }

To:

#commentList li a {
      border: 1px solid #ddd;
      margin-top: -1px;
      background-color: #f6f6f6; 
      padding: 12px;
      text-decoration: none;
      font-size: 14px;
      font-family: Arial, Helvetica, sans-serif;
      color: black;
      display: block;    
    }

 #commentList li {
      width: 364px;   
    }

The width is being applied to the <a> tag, not the <li>. You can make it so the width of the <li> is still 346px and still have the <a> tag work correctly within it.

See the JSFiddle: https://jsfiddle.net/d4g8f59h/

Upvotes: 0

Related Questions