CODEWITHSUNDEEP
htmlcss
Vinko
Vinko

Reputation: 181

How to make anchor tag fit to content? not entire width of page

I have got the look I desire with my css. A centered <p> and <div> one on top of the other and they are both wrapped in <a> tags.

Now my issue is that the <a> tags go for the entire width of the page, I just want to be able to click on the link where the actual content is.

example link: https://jsfiddle.net/vinko_k_design/dge4fx2z/

Upvotes: 7

Views: 13547

Answers (3)

Robby Cornelissen
Robby Cornelissen

Reputation: 97140

Using a span (inline element) instead of a div/p (block element), and moving the text-align property to the upper level will fix your issue. As follows:

.page-nav-buttons {
    text-align: center;
}

.page-nav {
}

.page-nav-img {
    width: 20px;
    height: 20px;
    background-color: red;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}
<div class="page-nav-buttons">
    <a href="#map">
        <span class="page-nav">Check out our Map</span>
    </a>
    <br/>
    <a href="#map">
        <span class="page-nav-img"></span>
    </a>
</div>

Upvotes: 4

user786
user786

Reputation: 4364

Try this

https://jsfiddle.net/dge4fx2z/1/

 <div class="page-nav-buttons">
  <p class="page-nav"> <a href="#map">
    Check out our Map
 </a>

 </p> <span class="page-nav-img">
 <a href="#map">

     <span class="page-nav-img"></span>

 </a>
 </span>
</div>

Upvotes: 1

Steve
Steve

Reputation: 9561

Put the anchor tags inside the p tag.

 <p class="page-nav"><a href="#map">Check out our Map</a></p>

Upvotes: 11

Related Questions