我有一个问题,标签在侧边栏-他们创建一个新的行在左侧
标签截图
它们应该与"已批准"one_answers"未批准"菜单链接在同一行。
这个示例代码来自:Bootstrap 3教程[COMPLETE] -为初学者构建博客管理视频教程第6部分和第7部分
.css:
.box {
border: 1px red dotted;
}
#side-menu {
background-color: #2f4050;
padding: 0px;
}
#side-menu h1 {
/*color: #1f3647; */
color: #fff;
text-align: center;
margin: 10px 0px;
font-size: 24px;
}
#side-menu ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#side-menu a {
padding: 12px 20px;
text-decoration: none;
color: #9fb1c2;
font-weight: bold;
font-size: 13px;
display: block;
}
#side-menu .glyphicon {
margin-right: 6px;
}
. html
<li class="link">
<a href="#collapse-comments" data-toggle="collapse" aria-controls="collapse-comments">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
<span>Comments</span>
</a>
<ul class="collapse collapsable box" id="collapse-comments">
<li>
<a href="approved.html">Approved</a>
<span class="label label-info pull-right box">17</span>
</li>
<li>
<a href="unapproved.html">Unapproved</a>
<span class="label label-warning pull-right">10</span>
</li>
</ul>
</li>
如果我将display:block;
改为display:inline-block;
,效果更好:标签
,但这次标签有点上,那么他们应该定位。另一个奇怪的行为是文章标签移动到左边
你的a
有display:block
,所以它的100%宽度默认情况下。a
必须在inline
或inline-block
上设置display
,如spans
:)
我已经将display:block;
更改为display:inline-block;
,工作正常。