Potrzebuję nieuporządkowanej listy bez nabojów.
Utworzyłem listę nieuporządkowaną. Czuję, że kule z listy nieuporządkowanej są uciążliwe, więc chcę je usunąć.
Czy możliwe jest posiadanie listy bez kul?
14 answers
Można usunąć punktory ustawiając list-style-type
do none
w CSS dla elementu nadrzędnego (zazwyczaj <ul>
), na przykład:
ul {
list-style-type: none;
}
Możesz również dodać do tego padding: 0
i margin: 0
, jeśli chcesz również usunąć wcięcia.
Zobacz Listutorial aby zapoznać się z doskonałymi technikami formatowania list.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-06-15 06:10:48
Jeśli używasz Bootstrap, ma on klasę "unstyled":
Usuń domyślny styl listy i lewy padding na elementach listy(tylko bezpośrednie dzieci).
Bootstrap 2:
<ul class="unstyled">
<li>...</li>
</ul>
Http://twitter.github.io/bootstrap/base-css.html#typography
Bootstrap 3 i 4:
<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
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-06-20 09:12:55
Musisz użyć list-style: none;
<ul style="list-style: none;">
<li>...</li>
</ul>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-04-15 20:58:36
Małe udoskonalenie do poprzednich odpowiedzi: aby dłuższe linie były bardziej czytelne, jeśli rozleją się na dodatkowe linie ekranu:
ul, li {list-style-type: none;}
li {padding-left: 2em; text-indent: -2em;}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-04-21 19:23:59
Jeśli nie możesz tego zrobić na poziomie <ul>
, być może będziesz musiał umieścić list-style-type: none;
na poziomie <li>
:
<ul>
<li style="list-style-type: none;">Item 1</li>
<li style="list-style-type: none;">Item 2</li>
</ul>
Możesz utworzyć klasę CSS, aby uniknąć tego powtórzenia:
<style>
ul.no-bullets li
{
list-style-type: none;
}
</style>
<ul class="no-bullets">
<li>Item 1</li>
<li>Item 2</li>
</ul>
W razie potrzeby użyj !important
:
<style>
ul.no-bullets li
{
list-style-type: none !important;
}
</style>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-04-21 19:27:01
Użyłem
Zarówno na ul, jak i li, aby usunąć kule. Chciałem zastąpić kule niestandardowym charakterem, w tym przypadku 'kreską'. Daje to ładnie wcięty efekt, który działa dobrze, gdy tekst zawija.
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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-09-07 14:40:53
Aby całkowicie usunąć ul
domyślny styl:
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;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-04-23 21:28:45
Jeśli chcesz to osiągnąć za pomocą czystego HTML, To rozwiązanie będzie działać we wszystkich głównych przeglądarkach:
Listy Opisowe
Wystarczy użyć następującego kodu 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>
, który stworzy listę podobną do poniższej:
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
Przykład tutaj: https://jsfiddle.net/zumcmvma/2/
Odniesienie tutaj: https://www.w3schools.com/tags/tag_dl.asp
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-23 01:48:55
To porządkuje listę pionowo bez punktorów. W jednej linii!
li {
display: block;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-04-21 19:28:26
Jeśli tworzysz istniejący motyw, możliwe jest, że motyw ma własny styl listy.
Więc jeśli nie możesz zmienić stylu listy używając list-style: none;
w znacznikach ul lub li, najpierw sprawdź !important
, ponieważ może jakaś inna linia stylu nadpisuje Twój styl. Jeśli !important
zostało to naprawione, powinieneś znaleźć bardziej konkretny Selektor i wyczyścić !important
.
li {
list-style: none !important;
}
Jeśli tak nie jest, sprawdź li:before
. Jeśli zawiera treść, to wykonaj:
li:before {
display: none;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-09-09 05:52:49
ul{list-style-type:none;}
Po prostu ustaw styl listy nieuporządkowanej jako none.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-07-29 17:55:37
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-26 04:16:51
Próbowałem i obserwowałem:
header ul {
margin: 0;
padding: 0;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-04-21 19:33:09
W przypadku, gdy chcesz zachować rzeczy proste bez uciekania się do CSS, po prostu umieścić
w moich liniach kodu. Tj. <table></table>
.
Tak, zostawia kilka miejsc, ale to nie jest zła rzecz.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-04-21 19:25:02