试图将“ led” <div>作为图标放入导航栏

问题描述

我具有实用的风格,可以产生适合我需求的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。我想将其放在部分可折叠的边栏中。折叠时,它可以做我想做的事,但展开时,它总是以与标签分开的一行结尾。

collapsed = good

expanded = ugly

goal = expanded in-line

侧边栏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>

如果我遗漏了一些必要的东西,或者在我真正需要的时候我给出太多细节的话,我深表歉意。

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)