尝试将 'led' <div> 作为图标放入导航栏

Question

我有一种功能型风格，可以产生适合我需要的 LED 指示灯。 CSS:

.led-yellow {
    margin: 20px auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #FF0;
    box-shadow: #000 0 -1px 6px 1px, inset #660 0 -1px 8px, #FF0 0 3px 11px;
}

如果我输入 (html) <div class="led-yellow"></div>，我会得到一个漂亮的黄色 LED。我想把它放在一个部分可折叠的侧边栏中。我可以让它在折叠时做我想做的事，但在展开时它总是与标签分开一行。

侧边栏html如下：

<section class="sidebar">
    <ul class="sidebar-menu" data-widget="tree">
...
       <li><a href="#"><i class="fa fa-book"></i> <span>Documentation</span></a></li> <!-- works! -->
   </ul>
   <ul class="sidebar-menu" data-widget="tree">
       <li><a href="#" disabled><div class="led led-yellow" style="margin-top: 0pt; margin-bottom: 0pt; margin-left: 0pt; margin-right: 10pt"></div><span>Something else</span></a></li>
   </ul>
</section>

如果我遗漏了一些必要的东西，或者在我需要的实际上非常简单的情况下提供了太多细节，我深表歉意。

Answer 1

将display:inline-block;添加到led-yellow

.led-yellow {
    margin: 20px auto;
    width: 12px;
    height: 12px;
    display:inline-block;
    border-radius: 50%;
    background-color: #FF0;
    box-shadow: #000 0 -1px 6px 1px, inset #660 0 -1px 8px, #FF0 0 3px 11px;
}

尝试将 'led' <div> 作为图标放入导航栏

trying to put an 'led' <div> into a navbar as an icon

css

navbar

twitter-bootstrap-3