CODEWITHSUNDEEP
htmlcss
JDS
JDS

Reputation: 16988

HTML, CSS, link element's clickability range is too wide

I am trying to add a simple link to the bottom right corner of my posts element:

enter image description here

Unfortunately, the entire bottom portion of this is clickable, which is not what I want. I just want the text "Link" to be clickable.

Code is below:

<div class="single-post shadow-sm">
    <div class="d-flex align-items-center justify-content-between">
        <div class="d-flex align-items-center">
            <p class="poster">PosterName</p>
            <span class="mx-1">|</span>
            <p class="category">Category1</p>
            <span class="mx-1">|</span>
            <p class="date_time">(date)</p>
        </div>
        <p class="dynamic-text">small_dynamic_text</p>
    </div>
    <p class="post-details">
        <span class="post-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam error corporis, eaque harum commodi at officiis velit aspernatur sapiente voluptatem praesentium inventore, in autem suscipit adipisci quis. Ut aliquam laboriosam qui quos harum excepturi, ex officiis illum laudantium minus deleniti odio fugiat delectus corporis magnam rerum eligendi! Minus, exercitationem voluptas?</span>
        <span class="toggle-details">
            <span class="show-more"> show more</span>
            <span class="show-less"> show less</span>
        </span>
        <a href="#" class="link-text">Link</a>
    </p>
</div>

This HTML already exists and I am just trying to insert the <a> element with class link-text which I've created below:

main .posts-content .posts .single-post .link-text {
    font-size: 12px;
    color: #25aa7e;
    font-weight: 600;
    text-align: right;
    display: block;
    margin-bottom: -10px;
}

Edit

enter image description here

This is the result with display:inline-block; width:auto; which is not exactly what I want because now Link is not right-aligned.

Upvotes: 1

Views: 270

Answers (3)

Youssouf Oumar
Youssouf Oumar

Reputation: 45923

Since your link is set to display:block, it is normal that it takes all the available width. Though you could set a width: max-width to reduce that width to the minimum that would fit the content without a line break, and a margin-left: auto to push it to the right. Like so :

main .posts-content .posts .single-post .link-text {
    font-size: 12px;
    color: #25aa7e;
    font-weight: 600;
    text-align: right;
    display: block;
    margin-bottom: -10px;
    /* lines to add */
    width: max-content; /* to reduce the width */
    margin-left: auto; /* to push it to the right */
}

Upvotes: 1

Steve
Steve

Reputation: 106

Your source code is a bit of a mess, I tried my best to understand what you are asking. Basically inline items don't respond to margin. Inline-block will get it pulled up, and margin-left: auto will get it to align to the right.

.link-text {
    font-size: 12px;
    color: #25aa7e;
    font-weight: 600;
    text-align: right;
    display: inline-block;
    margin: -10px 0 0 auto;
}
<div class="single-post shadow-sm">
    <p class="post-details">
        <span class="post-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam error corporis, eaque harum commodi at officiis velit aspernatur sapiente voluptatem praesentium inventore, in autem suscipit adipisci quis. Ut aliquam laboriosam qui quos harum excepturi, ex officiis illum laudantium minus deleniti odio fugiat delectus corporis magnam rerum eligendi! Minus, exercitationem voluptas?</span>
        <span class="toggle-details">
            <span class="show-more"> show more</span>
            <span class="show-less"> show less</span>
        </span>
        <a href="#" class="link-text">Link</a>
    </p>

</div>

Upvotes: 1

scunliffe
scunliffe

Reputation: 63588

Your CSS is set to:

display:block;

Which by default fills the horizontal space. Try inline or inline-block depending on the effect you want.

display:inline-block;
width:auto; /* keep the width constricted to the element content */

Upvotes: 3

Related Questions