A tag with Div tag-CodePudding

This is my code

<a href="https://www.w3schools.com">
    <div style="width:200px; border:1px solid black;">
        Visit W3Schools.com!
    </div>
</a>

My div width is 200PX. But my link is activated right side of the white space. How to activate link only within the div width, ie within 200px?

CodePudding user response：

Depending on what you're trying to do:

<a style="display:inline-block;" href="https://www.w3schools.com"><div style="width:200px; border:1px solid black;">Visit W3Schools.com!</div></a>

<a style="display:block; width:fit-content;" href="https://www.w3schools.com"><div style="width:200px; border:1px solid black;">Visit W3Schools.com!</div></a>

CodePudding user response：

Try This:

<div style="width:200px; border:1px solid black;">
    <a style="display:flex; width: 100%;" href="https://www.w3schools.com">
        Visit W3Schools.com!
    </a>
</div>

CodePudding user response：

Instead of nesting the div in the a- element, make it its parent.

<div> <div style="width:200px; border:1px solid black;">
<a href="https://www.w3schools.com">Visit W3Schools.com!</a>
</div>

Have fun coding!