Jak ustawić kolory punktorów w listach html ul / LI za pomocą CSS bez użycia obrazów lub znaczników span [duplikat]
To pytanie ma już odpowiedź tutaj:
- zmiana koloru punktorów listy HTML bez użycia span 10 odpowiedzi
Wyobraź sobie prostą, niesortowaną listę z niektórymi <li>
elementami. Teraz zdefiniowałem kule na kształt kwadratu przez list-style:square;
Jednak jeśli ustawiłem kolor <li>
elementów za pomocą color: #F00;
to Wszystko staje się red!
...bez użycia żadnych obrazów sprite ani znaczników span!
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>
CSS
li{
list-style:square;
}
16 answers
Najczęstszym sposobem na to jest coś w następujący sposób:
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding-left: 1em;
text-indent: -.7em;
}
li::before {
content: "• ";
color: red; /* or whatever color you prefer */
}
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>
JSFiddle: http://jsfiddle.net/leaverou/ytH5P/
Będzie działać we wszystkich przeglądarkach, w tym IE od wersji 8 i nowszej.
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
2017-01-26 18:33:23
Przeglądając jakiś czas temu, znalazłem tę stronę, próbowałeś tej alternatywy?
li{
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAE0lEQVQIW2NkYGD4D8RwwEi6AACaVAQBULo4sgAAAABJRU5ErkJggg==");
}
Brzmi ciężko, ale możesz zrobić własny obraz/Wzór png Proszę., następnie skopiuj / wklej kod i dostosuj swoje kule =) stills elegant?
EDIT:
Idąc za ideą @ lea-verou na drugą odpowiedź i stosując tę filozofię zewnętrznych źródeł doszedłem do tego innego rozwiązania:
- umieść w swojej głowie arkusz stylów Webfonta Biblioteka ikon, w tym przypadku Font Awesome:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
- weź kod z FontAwesome cheatsheet (lub innych ikon webfonta).
i.e.: fa-angle-right []
I użyj ostatniej części f... po której następuje taka liczba, z font-family
również:
li:before {
content: "\f105";
font-family: FontAwesome;
color: red; /* or whatever color you prefer */
margin-right: 4px;
}
I to wszystko! teraz masz też niestandardowe końcówki kul=)
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
2015-10-07 20:28:58
Obecna Specyfikacja CSS 3 List Moduł określa ::marker
pseudo-element który zrobiłby dokładnie to, co chcesz; FF został przetestowany
aby nie obsługiwać ::marker
i wątpię, czy ma to Safari czy Opera.
IE, oczywiście, nie obsługuje go.
Więc teraz, jedynym sposobem, aby to zrobić, jest użycie obrazu z list-style-image
.
Myślę, że można zawinąć zawartość li
span
i wtedy można ustawić kolor każdego z nich, ale to wydaje się trochę hakerskie dla mnie.
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
2015-03-25 20:45:59
Po prostu rozwiązuję ten problem w ten sposób, który powinien działać we wszystkich przeglądarkach:
HTML:
<ul>
<li><span>Foo</span></li>
<li><span>Bar</span></li>
<li><span>Bat</span></li>
</ul>
CSS:
ul li{
color: red
}
ul li span{
color: blue;
}
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
2015-04-19 06:18:39
Jednym ze sposobów jest użycie li:before
z content: ""
i stylizowanie go jako inline-block
element.
Oto działający fragment kodu:
ul {
list-style-type: none; /* no default bullets */
}
li {
font-family: Arial;
font-size: 18px;
}
li:before { /* the custom styled bullets */
background-color: #14CCBB;
border-radius: 50%;
content: "";
display: inline-block;
margin-right: 10px;
margin-bottom: 2px;
height: 10px;
width: 10px;
}
<ul>
<li>Swollen joints</li>
<li>Pain in hands and knees</li>
<li>Redness around joints</li>
<li>Constant fatigue</li>
<li>Morning stiffness in joints</li>
<li>High fevers</li>
<li>Rheumatoid nodules, which develop around joints</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
2018-01-10 18:03:16
Jednak innym rozwiązaniem jest użycie :before
pseudo elementu z border-radius: 50%
. Będzie to działać we wszystkich przeglądarkach, w tym IE 8 i nowszych.
Użycie jednostki em
umożliwia reagowanie na zmiany rozmiaru czcionki. Możesz to przetestować, zmieniając rozmiar okna jsFiddle.
ul {
list-style: none;
line-height: 1em;
font-size: 3vw;
}
ul li:before {
content: "";
line-height: 1em;
width: .5em;
height: .5em;
background-color: red;
float: left;
margin: .25em .25em 0;
border-radius: 50%;
}
JsFiddle
Możesz nawet bawić się box-shadow
, aby stworzyć ładne cienie, coś, co nie będzie wyglądać ładnie z rozwiązaniem content: "• "
.
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
2015-06-29 07:44:51
Używam do tego jQuery:
jQuery('li').wrapInner('<span class="li_content" />');
& z jakimś CSS:
li { color: red; }
li span.li_content { color: black; }
Może przesada, ale przydatne, jeśli kodujesz dla CMS i nie chcesz prosić redaktorów o dodanie dodatkowego zakresu w każdej liście-pozycji.
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
2011-06-04 13:01:16
Próbowałem tego i zrobiło się dziwnie. (css przestał działać po :after {content: "";}
części tego samouczka. Znalazłem, że możesz pokolorować kule używając {[2] } na samym elemencie li
.
Oto przykład.
li{
color:#ff0000;
list-style:square;
}
a {
text-decoration: none;
color:#00ff00;
}
a:hover {
background-color: #ddd;
}
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
2015-04-19 06:14:37
Polecam dać LI
A background-image
i padding-left
. Atrybut list-style-image
jest flakey w środowiskach między przeglądarkami, a dodanie dodatkowego elementu, takiego jak span, jest unneccessary. Więc Twój kod będzie wyglądał mniej więcej tak:
li {
background:url(../images/bullet.png) 0 0 no-repeat;
list-style:none;
padding-left:10px;
}
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
2015-04-19 06:19:32
Najprostszą rzeczą, jaką możesz zrobić, to zawinąć zawartość <li>
w <span>
lub równoważny, a następnie możesz ustawić kolor niezależnie.
Alternatywnie można utworzyć obraz o pożądanym kolorze punktora i ustawić go za pomocą właściwości list-style-image
.
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
2011-03-15 01:56:05
Odmiana Lea Verou rozwiązanie z doskonałym wcięciem w wpisach wielowierszowych może wyglądać mniej więcej tak:
ul{
list-style: none;
position: relative;
padding: 0;
margin: 0;
}
li{
padding-left: 1.5em;
}
li:before {
position: absolute;
content: "•";
color: red;
left: 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
2017-05-23 11:47:22
Dodaję moje rozwiązanie tego problemu.
Nie chcę używać image i validator ukarze cię za używanie ujemnych wartości w CSS, więc idę w ten sposób:
ul { list-style:none; padding:0; margin:0; }
li { padding-left:0.75em; position:relative; }
li:before { content:"•"; color:#e60000; position:absolute; left:0em; }
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
2014-02-08 10:58:44
Wiem, że to trochę spóźniona odpowiedź na ten post, ale w celach informacyjnych...
CSS
ul {
color: red;
}
li {
color: black;
}
Kolor pocisku jest zdefiniowany na znaczniku ul, a następnie zmieniamy kolor li z powrotem.
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
2013-07-26 10:00:29
Lea Verous rozwiązanie jest dobre, ale chciałem mieć większą kontrolę nad położeniem kul, więc takie jest moje podejście:
.entry ul {
list-style: none;
padding: 0;
margin: 0;
/* hide overflow in the case of floating elements around ... */
overflow: hidden;
}
.entry li {
position: relative;
padding-left: 24px;
}
.entry li:before {
/* with absolute position you can move this around or make it bigger without getting unwanted scrollbars */
position: absolute;
content: "• ";
color: #E94E24;
font-size: 30px;
left: 0;
/* use fonts like "arial" or use "sans-serif" to make the dot perfect round */
font-family: Arial, sans-serif;
}
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
2015-09-11 12:54:05
Biorąc pod uwagę demo Lei, oto inny sposób tworzenia niestandardowych list, z obramowaniami: http://jsfiddle.net/vX4K8/7/
HTML
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<ul>
<li>Son</li>
<li>Of</li>
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>
</ul>
</ul>
CSS
ul {
list-style: none;
margin: 0;
}
ul:first-child {
padding: 0;
}
li {
line-height: 180%;
border-bottom: 1px dashed #CCC;
margin-left: 14px;
text-indent: -14px;
}
li:last-child {
border: none;
}
li:before {
content: "";
border-left: 4px solid #CCC;
padding-left: 10px;
}
To wystarczy..
li{
color: #fff;
}
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
2016-01-15 09:43:20