Anchor Tag is Clickable Across Width of Screen

make entire div clickable
make div clickable javascript
div onclick href target
how to give link to div tag in html
how to make a card clickable in html
make span clickable
make div clickable jquery
div as anchor tag

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>

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.

Setting a width and height on an A tag, How do I change the width of an anchor tag? Setting a border on the anchor tag forces Internet Explorer to recognize the width and height of the anchor, thereby giving it clickable area again. This fix was discovered while trying to debug the problem: adding a border to find out where the anchor was sitting on the page made it magically show up again.

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/

How to increase the clickable area of a <a> tag button?, and height values. You can also use display: inline-block . Use <a /> when you need a link (the a of anchor). Use <button /> when you need a button. That said, if you really need to expand an <a />, add the CSS attribute display: block; on it. You'll then be able to specify a width and/or a height (i.e. as if it were a <div />).

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

Making a div element clickable in HTML, How do I increase the clickable area of a link? but there is a tricky way to achieve this using a CSS code you must nest an anchor tag inside your div tag and you must apply this property to it, display:block; when you've done that,it will make the whole width area clickable (but within the height of the anchor tag),if you want to cover the whole div area you must set the height of the

Try changing the width of the anchor tag in the CSS and also display it with an in

Make Entire Div Clickable, myBox").click(function() { window.location = $(this).find("a").attr("href"); return false; });. Looks for a link inside div with class of “myBox”. CSS-Tricks * is created, written by, and maintained by Chris Coyier and a team of swell people. The tech stack for this site is fairly boring. That's a good thing! I've used WordPress since day one all the way up to v17, a decision I'm very happy with. I also leverage Jetpack for extra functionality and Local for local development.

Correct Way To Place a Link Around DIV? - Get Started, Hi, I am trying to put a link around a set of DIVS so that a block of the page has a link <a href="/users/register.php" rel="nofollow" > <div class="maincellleft"> <​div display: block on the <li> and setting padding, etc. to give the required size of block. All this does is to make the entire <div> into a clickable link, it doesn't do  There’s a pure CSS way to go about doing this. Just have an anchor (a) tag within the DIV that links to the URL you want. Then, set it to a block display, relative positioning, left and top equal to 0, width and height to full (or use jQuery to match all A’s within DIV’s to the same dimensions as the DIV).

CSS Trick: Turning a background image into a clickable link, see the whole image). Since an anchor tag isn't a block level element, we need to force it to display as “block” so that we can specify the size:  Screen readers do usually identify whether a link is an anchor by adding the phrase “in- page link”, so they at least have some feedback when activating an anchor link.

CSS: Making an Entire Div Clickable Without Javascript Using , Display:block on the a or anchor element, and the use of span elements to The feat was achieved through some experimentation and use of the “display:block” CSS attribute on the anchor or <a> element. The “width” and “height” properties are both set to 100%. After the opening <div> tag, the <a> element is added. Size and proximity Size. Interactive elements, like links, should provide an area large enough that it is easy to activate them. This helps a variety of people, including those with motor control issues and those using imprecise inputs such as a touchscreen. A minimum size of 44×44 CSS pixels is recommended.

Comments
  • This is correct and should be marked as the accepted answer.
  • This is correct. Thank you for answering my question!