tentando colocar um <div> 'led' em uma barra de navegação como um ícone
usuario
Tenho um estilo funcional que produz um indicador led que se adapta às minhas necessidades. 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;
}
Se eu colocar (html) <div class="led-yellow"></div>, obtenho um led amarelo bonito. Eu gostaria de colocá-lo em uma barra lateral parcialmente recolhível. Posso fazer com que ele faça o que desejo quando recolhido, mas sempre termina em uma linha separada do rótulo quando expandido.
O html da barra lateral é o seguinte:
<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>
Minhas desculpas se deixei algo necessário de fora, ou se dei muitos detalhes quando o que eu preciso é realmente muito simples.
Rayees AC
Adicionar display:inline-block;ao led amarelo
.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;
}
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
editar em
Artigos relacionados
TOP lista
- 1
R Shiny: use HTML em funções (como textInput, checkboxGroupInput)
- 2
UITextView não está exibindo texto longo
- 3
Dependência circular de diálogo personalizado
- 4
Acessando relatório de campanhas na AdMob usando a API do Adsense
- 5
Como assinar digitalmente um documento PDF com assinatura e texto visíveis usando Java
- 6
R Folheto. Dados de pontos de grupo em células para resumir muitos pontos de dados
- 7
Setas rotuladas horizontais apontando para uma linha vertical
- 8
O Chromium e o Firefox exibem as cores de maneira diferente e não sei qual deles está fazendo certo
- 9
Definir um clipe em uma trama nascida no mar
- 10
Por que meus intervalos de confiança de 95% da minha regressão multivariada estão sendo plotados como uma linha de loess?
- 11
Como dinamizar um Dataframe do pandas em Python?
- 12
regex para destacar novos caracteres de linha no início e no fim
- 13
Why isn't my C# .Net Core Rest API route finding my method?
- 14
Como obter a entrada de trás de diálogo em treeview pyqt5 python 3
- 15
Tabela CSS: barra de rolagem para a primeira coluna e largura automática para a coluna restante
- 16
How to create dynamic navigation menu select from database using Codeigniter?
- 17
Como recuperar parâmetros de entrada usando C #?
- 18
Changing long, lat values of Polygon coordinates in python
- 19
Livros sobre criptografia do muito básico ao muito avançado
- 20
Método \ "POST \" não permitido no framework Django rest com ações extras & ModelViewset
- 21
Pesquisa classificada, conte números abaixo do valor desejado
deixe-me dizer algumas palavras