我无法将面包屑移到我的文字下方。
我试图将痕迹移到文本正下方。我做了padding-left
,float: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上发布的图片。