Eu criei uma lista não ordenada. Sinto que as balas na lista não ordenada são incômodas, então quero removê-las.
É possível ter uma lista sem marcadores?
Eu criei uma lista não ordenada. Sinto que as balas na lista não ordenada são incômodas, então quero removê-las.
É possível ter uma lista sem marcadores?
Respostas:
Você pode remover marcadores configurando list-style-type
para none
no CSS para o elemento pai (normalmente a <ul>
), por exemplo:
ul {
list-style-type: none;
}
Você também pode querer adicionar padding: 0
emargin: 0
isso se desejar remover o recuo também.
Consulte o Tutorial de lista para obter uma grande explicação das técnicas de formatação de lista.
Se você estiver usando o Bootstrap, ele possui uma classe "sem estilo":
Remova o estilo de lista padrão e o preenchimento esquerdo nos itens da lista (somente filhos imediatos).
<ul class="unstyled">
<li>...</li>
</ul>
http://twitter.github.io/bootstrap/base-css.html#typography
<ul class="list-unstyled">
<li>...</li>
</ul>
Bootstrap 3: http://getbootstrap.com/css/#type-lists
Bootstrap 4: https://getbootstrap.com/docs/4.3/content/typography/#unstyled
Você precisa usar list-style: none;
<ul style="list-style: none;">
<li>...</li>
</ul>
Pequeno refinamento das respostas anteriores: Para tornar as linhas mais longas mais legíveis se elas se espalharem para linhas de tela adicionais:
ul, li {list-style-type: none;}
li {padding-left: 2em; text-indent: -2em;}
list-style-type: none;
o ul
e o li
. Você pode apenas fazer um.
Se você não conseguir fazê-lo funcionar no <ul>
nível, pode ser necessário colocá-lo list-style-type: none;
no <li>
nível:
<ul>
<li style="list-style-type: none;">Item 1</li>
<li style="list-style-type: none;">Item 2</li>
</ul>
Você pode criar uma classe CSS para evitar esta repetição:
<style>
ul.no-bullets li
{
list-style-type: none;
}
</style>
<ul class="no-bullets">
<li>Item 1</li>
<li>Item 2</li>
</ul>
Quando necessário, use !important
:
<style>
ul.no-bullets li
{
list-style-type: none !important;
}
</style>
Usei o estilo de lista nos ul e li para remover as balas. Eu queria substituir as balas por um caractere personalizado, neste caso, um 'traço'. Isso fornece um efeito bem recuado que funciona quando o texto é finalizado.
ul.dashed-list {
list-style: none outside none;
}
ul.dashed-list li:before {
content: "\2014";
float: left;
margin: 0 0 0 -27px;
padding: 0;
}
ul.dashed-list li {
list-style-type: none;
}
<ul class="dashed-list">
<li>text</li>
<li>text</li>
</ul>
Para remover completamente o ul
estilo padrão:
list-style-type: none;
margin: 0;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 0;
Se você deseja fazer isso apenas com HTML puro , esta solução funcionará em todos os principais navegadores:
Listas de descrição
Simplesmente usando o seguinte HTML:
<dl>
<dt>List Item 1</dt>
<dd>Sub-Item 1.1</dd>
<dt>List Item 2</dt>
<dd>Sub-Item 2.1</dd>
<dd>Sub-Item 2.2</dd>
<dd>Sub-Item 2.3</dd>
<dt>List Item 3</dt>
<dd>Sub-Item 3.1</dd>
</dl>
O que produzirá uma lista semelhante à seguinte:
List Item 1
Sub-Item 1.1
List Item 2
Sub-Item 2.1
Sub-Item 2.2
Sub-Item 2.3
List Item 3
Sub-Item 3.1
Exemplo aqui: https://jsfiddle.net/zumcmvma/2/
Referência aqui: https://www.w3schools.com/tags/tag_dl.asp
<dt>
e a definição desse termo em <dd>
.
Isso ordena uma lista verticalmente sem marcadores. Em apenas uma linha!
li {
display: block;
}
display
valor padrão de <li>
, que é display: list-item;
.
se você estiver desenvolvendo um tema existente, é possível que o tema tenha um estilo de lista personalizado.
portanto, se você não pode alterar o estilo da lista usando list-style: none;
tags ul ou li, verifique primeiro com!important
porque talvez alguma outra linha de estilo esteja sobrescrevendo o seu estilo; se o importante foi corrigido, você deve encontrar um seletor mais específico e limpar o! important .
se não for o caso, verifique li:before
o conteúdo. então faça:
li:before { dispaly: none; }
<div class="custom-control custom-checkbox left">
<ul class="list-unstyled">
<li>
<label class="btn btn-secondary text-left" style="width:100%;text-align:left;padding:2px;">
<input type="checkbox" style="zoom:1.7;vertical-align:bottom;" asp-for="@Model[i].IsChecked" class="custom-control-input" /> @Model[i].Title
</label>
</li>
</ul>
</div>
Eu tentei e observei:
header ul {
margin: 0;
padding: 0;
}
Caso você queira simplificar as coisas sem recorrer ao CSS, basta colocar um
nas minhas linhas de código. Ou seja <table></table>
,.
Sim, deixa alguns espaços, mas isso não é uma coisa ruim.