Problem with displaying elements as an inline-block

Question

I am not an expert in CSS, but I am trying to add a title next to Profile Image and Name as per the pic added

I am trying to send the text next to the profile name and image and enlarge the font but I think there is something wrong with the CSS so can I override the CSS and write it directly in the HTML or what is the best way to do it

here is the HTML

<div class="dcard_header" style:"display: inline-block;">

                        <div class="profile_image" href="{% url 'score:user-posts' post.designer.username %}">
                        <img class="profile_image" src="{{ post.designer.profile.image.url }}">
                        </div>

                        <div class="post_info">
                            <a class="post_name" href="{% url 'score:user-posts' post.designer.username %}">{{ post.designer }}</a>
                        </div>

                        <div class="caption" style="text-align:center;">
                            <strong><span><p>{{post.title}}</p></span></strong>
                        </div> 

                    </div>

This is the CSS


.dcard {
  background-color: #ffff;
  margin: 0 auto;
  width: 614px;
  height: auto;
  border: 0.8px solid #ccc;
  border-radius: 4px;
  margin-bottom: 20px;
}

.dcard_header {
  padding: 10px;
  display: inline-block;
}

.dcard_header a {
  text-decoration: none;
  color: black;
}

.profile_image {
  display: inline-block;
  height: 40px;
  width: 40px;
  padding: 0;
  margin: 0;
  border: 0 solid #000000;
  border-radius: 50%;
}

.post_info {
  display: inline-block;
  padding-left: 14px;
}

.caption {
  display: inline-block;
  width: 100%;
  padding: 0px 16px;
}

.caption a {
  font-weight: bold;
  color: #000;
  text-decoration: none;
  display: inline-block;
  padding-left: 5px;
  margin-left: -5px;
  padding-right: 5px;
}

.caption span {
  font-size: 18px;
  color: #111;
  display: inline-block;
  margin-right: 15px;
  display: inline-block;
}

Thanks all

I believe it's because of p, as p is block element and takes the whole width. For testing sake either change the CSS of p to inline-block or replace it with let say span. — Zain Zafar
– Zain Zafar, Commented May 10, 2020 at 20:39

Ashish Kumar · Accepted Answer · 2020-05-10 20:51:29Z

1

Rather than inline-block, you can try using flex.

answered May 10, 2020 at 20:51

Ashish Kumar

1667 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

شسیشسی · Accepted Answer · 2020-05-10 20:54:44Z

0

should It, fix:

.dcard_header {
   padding: 10px;
   display: flex;
 }

answered May 10, 2020 at 20:54

شسیشسی

701 silver badge6 bronze badges

Collectives™ on Stack Overflow

Problem with displaying elements as an inline-block

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related