将痕迹移到文本正下方和图像旁边,但不会移动

时间:2016-01-12 02:48:48

标签: html css

我无法将面包屑移到我的文字下方。

我试图将痕迹移到文本正下方。我做了padding-leftfloat:left,但他们不太合适。任何帮助,将不胜感激。

这是我的面包屑代码:

<ol class="post-info">
   <div class="btn-group btn-breadcrumb">
      <span class="btn btn-default">{{ post.pub_date | date }}<i class="fa fa-clock-o"></i></span>
      <span class="btn btn-default">{{post.views}}<i class="fa fa-eye"></i></span>
      <span class="btn btn-default">{{ post.moderator.username }}<i class="fa fa-heart-o"></i></span>
      <a href="{% url 'post' post.slug %}" class="btn btn-default">discuss</a>
      <a href="{{ c.get_absolute_url }}" class="btn btn-default">{{post.category}}<i class="fa fa-hashtag"></i></a>
   </div>
</ol>

这是我的面包屑的css,但它们可以改变。可以改变大小或任何困扰移动的东西。

.btn-breadcrumb .btn:not(:last-child):after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 10px solid white;
  position: absolute;
  top: 50%;
  margin-top: -17px;
  left: 100%;
  z-index: 3;
}

.btn-breadcrumb .btn.btn-default:not(:last-child):after {
  border-left: 10px solid #fff;
}
.btn-breadcrumb .btn.btn-default:not(:last-child):before {
  border-left: 10px solid #ccc;
}
.btn-breadcrumb .btn.btn-default:hover:not(:last-child):after {
  border-left: 10px solid #ebebeb;
}
.btn-breadcrumb .btn.btn-default:hover:not(:last-child):before {
  border-left: 10px solid #adadad;
}

这是我的html代码,我试图使用breadcrumb

<td class="vert-align">
  {% if post.url %}
     <h4 id="line">
        <a href="{{ post.url }}" style="margin-left: 15px;"> 
           <img src="{{post.image}}" height="85" width="85"/> 
           <span id="title-font">{{ post.title }}</span>
        </a>
        <span style="margin-left: 15px;" class="domain">
           ({{ post.domain }})
        </span>
      </h4>
  {% else %}
      <h4>
         <a href="{% url 'post' post.slug %}" style="margin-left: 15px;">
            {{ post.title }}
         </a>
         <span style="margin-left: 15px; "class="domain">
            ({{ post.domain }})
         </span>
       </h4>
  {% endif %}
</td>

在这段代码之下,面包屑代码进入。然后我得到了像我在imgur上发布的图片。

0 个答案:

没有答案