时间戳

首页 > 解决方案 > 将元素显示为内联块的问题

html - 将元素显示为内联块的问题

问题描述

我不是 CSS 专家，但我正在尝试根据添加的图片在配置文件图像和名称旁边添加一个标题在此处输入图像描述

我正在尝试将文本发送到配置文件名称和图像旁边并放大字体，但我认为 CSS 有问题，所以我可以覆盖 CSS 并将其直接写入 HTML 或者最好的方法是什么

这是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>

这是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;
}

谢谢大家

标签： htmlcss

解决方案

而不是inline-block，您可以尝试使用flex.

推荐阅读