Question

我在侧边栏中有标签问题 - 他们在左侧面板中创建了一个新行

他们与＆＃34;批准＆＃34;处于同一行。和＆＃34;未批准＆＃34;菜单链接。

此代码示例来自：Bootstrap 3 Tutorials [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;则更好： Second screenshots for labels

但这次标签位于上方，应该找到它们。另一个奇怪的行为是文章标签向左移动

Answer 1

您的a有display:block，因此默认为100％宽度。 a必须设置display inline或inline-block，spans：

Answer 2

我已将display:block;更改为display:inline-block;，但工作正常。请你检查一下，让我知道解决方案。

这个.css有什么问题？（bootstrap，css，sidebar）

2 个答案:

这个.css有什么问题？ （bootstrap，css，sidebar）

2 个答案:

这个.css有什么问题？（bootstrap，css，sidebar）