Представьте себе простой несортированный список с некоторыми элементами <li>
. Теперь я определил, что пули имеют квадратную форму с помощью list-style:square;
Однако, если я установил цвет элементов <li>
с помощью color: #F00;
, тогда все станет красным!
Пока я хочу только установить цвет квадратных пуль. Есть ли элегантный способ, чтобы определить цвет пуль в CSS...
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>
CSS
li{
list-style:square;
}
Самый распространенный способ сделать это - это что-то в этом роде:
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/
Будет работать во всех браузерах, включая IE от версии 8 и выше.
impossible cannot be done
ответы, вы решили это как very sossible
ответ! Умный, креативный, короткий ... вневременной ELEGANT! Спасибо
"• "
==> "•"
и добавил эту строку ниже: padding-right:7px;
немного больше контроля там :) остальное круто и работает везде. PS что означает :before
чем здесь / делать здесь?
просматривая когда-то ранее, нашел этот сайт, попробовал ли вы эту альтернативу?
li{
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAE0lEQVQIW2NkYGD4D8RwwEi6AACaVAQBULo4sgAAAABJRU5ErkJggg==");
}
звучит сложно, но вы можете сделать свой собственный png image/pattern здесь, затем скопируйте/вставьте свой код и настроить ваши пули =) стильные элегантные?
EDIT:
следуя идее @lea-verou по другому ответу и применяя эту философию улучшения внешних источников, я пришел к этому другому решению:
<link rel="stylesheet" href="/font-awesome.min.css">
i.e.: fa-angle-right []
и используйте последнюю часть f... затем число, подобное этому, с помощью font-family
тоже:
li:before {
content: "\f105";
font-family: FontAwesome;
color: red; /* or whatever color you prefer */
margin-right: 4px;
}
и что это! теперь у вас есть собственные подсказки для пули тоже =)
Я просто решаю эту проблему, как это, которая должна работать во всех браузерах:
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;
}
В текущей спецификации модуля CSS 3 Lists указан ::marker
псевдоэлемент, который будет делать именно то, что вы хотите; FF был протестирован
чтобы не поддерживать ::marker
, и я сомневаюсь, что это либо Safari, либо Opera.
IE, конечно, не поддерживает его.
Итак, прямо сейчас единственный способ сделать это - использовать изображение с list-style-image
.
Я предполагаю, что вы можете обернуть содержимое li
с помощью span
, а затем вы можете установить цвет каждого, но это кажется мне немного хакерским.
"IE, of course, does not support it."
:)
Один из способов сделать это - использовать li:before
с content: ""
и стилизовать его как элемент inline-block
.
Вот рабочий фрагмент кода:
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>
Тем не менее, другим решением является использование псевдоэлемента :before
с border-radius: 50%
. Это будет работать во всех браузерах, включая IE 8 и выше.
Использование блока em
позволяет реагировать на изменения размера шрифта. Вы можете проверить это, изменив размер окна 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%;
}
Вы даже можете играть с помощью box-shadow
, чтобы создать приятные тени, что не понравится с помощью решения content: "• "
.
margin: 0.5em 0.25em 0 0
, но в остальном это было идеально
Я попробовал это, и все стало странно для меня. (css перестала работать после части :after {content: "";}
этого урока. Я обнаружил, что вы можете покрасить пули, просто используя color:#ddd;
в самом элементе li
.
Здесь пример.
li{
color:#ff0000;
list-style:square;
}
a {
text-decoration: none;
color:#00ff00;
}
a:hover {
background-color: #ddd;
}
li
, очевидно.
Я использую jQuery для этого:
jQuery('li').wrapInner('<span class="li_content" />');
& с некоторым CSS:
li { color: red; }
li span.li_content { color: black; }
может быть, излишне, но удобно, если вы кодируете CMS, и не хотите, чтобы ваши редакторы добавляли дополнительный диапазон в каждом элементе списка.
Я бы рекомендовал дать LI
a background-image
и padding-left
. Атрибут list-style-image
является ошибочным в средах с несколькими браузерами, и добавление дополнительного элемента, такого как диапазон, не является обязательным. Таким образом, ваш код будет выглядеть примерно так:
li {
background:url(../images/bullet.png) 0 0 no-repeat;
list-style:none;
padding-left:10px;
}
Вариант решения Lea Verou с идеальным отступом в многострочных записях может быть примерно таким:
ul{
list-style: none;
position: relative;
padding: 0;
margin: 0;
}
li{
padding-left: 1.5em;
}
li:before {
position: absolute;
content: "•";
color: red;
left: 0;
}
Самое простое, что вы можете сделать, это обернуть содержимое <li>
в <span>
или эквивалент, после чего вы можете установить цвет независимо.
В качестве альтернативы вы можете сделать изображение с нужным цветом пули и установить его с помощью свойства list-style-image
.
Я добавляю свое решение этой проблемы.
Я не хочу использовать изображение, и валидатор будет наказывать вас за использование отрицательных значений в CSS, поэтому я иду следующим образом:
ul { list-style:none; padding:0; margin:0; }
li { padding-left:0.75em; position:relative; }
li:before { content:"•"; color:#e60000; position:absolute; left:0em; }
Я знаю это немного позднего ответа на этот пост, но для справки...
CSS
ul {
color: red;
}
li {
color: black;
}
Цвет пули определен по тегу ul, а затем мы возвращаем цвет li.
Решение Lea Verous хорошее, но я хотел большего контроля над положением пуль, так что это мой подход:
.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;
}
Взятие Lea demo, здесь другой способ создания неупорядоченных списков с границами: 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;
}
Это сделает это.
li{
color: #fff;
}
a timelessly elegant solution