Есть ли способ настроить положение стиля в стиле списка?
Когда я использую отступы для элементов списка, изображение будет оставаться в своем положении и не будет перемещаться с заполнением...
Есть ли способ настроить положение стиля в стиле списка?
Когда я использую отступы для элементов списка, изображение будет оставаться в своем положении и не будет перемещаться с заполнением...
На самом деле, нет. Ваше заполнение (вероятно) применяется к элементу списка, поэтому влияет только на фактическое содержимое в элементе списка.
Использование комбинации стилей фона и отступов может создать нечто похожее, например
li {
background: url(images/bullet.gif) no-repeat left top; /* <-- change 'left' & 'top' too for extra control */
padding: 3px 0px 3px 10px;
/* reset styles (optional): */
list-style: none;
margin: 0;
}
Возможно, вы захотите добавить стили в родительский контейнер списка (ul), чтобы расположить элементы маркированного списка, эта статья A List Apart имеет хорошую начальную ссылку.
Я обычно скрываю тип стиля списка и использую фоновое изображение, которое является подвижным
li
{
background: url(/Images/arrow_icon.gif) no-repeat 7px 7px transparent;
list-style-type: none;
margin: 0;
padding: 0px 0px 1px 24px;
vertical-align: middle;
}
"7px 7px" - это то, что выравнивает фоновое изображение внутри элемента и также относится к дополнению.
Возможное решение этого вопроса, которое еще не было упомянуто, следующее:
li {
position: relative;
list-style-type: none;
}
li:before {
content: "";
position: absolute;
top: 8px;
left: -16px;
width: 8px;
height: 8px;
background-image: url('your-bullet.png');
}
Теперь вы можете использовать верхнюю/левую часть li: прежде чем позиционировать новую марку. Обратите внимание, что ширина и высота li: до этого должны быть того же размера, что и выбранное фоновое изображение. Это работает в Internet Explorer 8 и выше.
У меня была та же проблема, но я не мог использовать опцию фона (и не хотел использовать несколько фонов), поэтому я подумал о другом решении
это пример для меню с квадратным индикатором для элемента текущего/текущего меню (стиль списка по умолчанию в другом правиле не установлен)
nav ul li.active>a:before{
content: "■";
position: absolute;
top: -22px;
left: 55px;
font-size: 33px;
}
он создает квадрат с использованием квадратного символа с псевдо-классом ": before" и он свободно позиционируется с использованием абсолютного позиционирования.
Вот что я сделал, чтобы получить маленькие серые блоки с левой стороны и в центре текста с увеличенной линейной подсветкой:
line-height:200%;
padding-left:13px;
background-image:url('images/greyblock.gif');
background-repeat:no-repeat;
background-position:left center;
Надеюсь, это поможет кому-то: D
Другим вариантом, который вы можете сделать, является следующее:
li:before{
content:'';
padding: 0 0 0 25px;
background:url(../includes/images/layouts/featured-list-arrow.png) no-repeat 0 3px;
}
Используйте (0 3px), чтобы поместить изображение в список.
Работает в IE8 +, Chrome, Firefox и Opera.
Я использую этот параметр, потому что вы можете легко менять стиль списка и иметь хорошие шансы, что вам даже не придется использовать изображение вообще. (скрипка ниже)
http://jsfiddle.net/flashminddesign/cYAzV/1/
ОБНОВЛЕНИЕ:
Это будет учитывать текст/содержание, идущие во вторую строку:
ul{
list-style-type:none;
}
li{
position:relative;
}
ul li:before{
content:'>';
padding:0 10px 0 0;
position:absolute;
top:0; left:-10px;
}
Добавить padding-left: в li, если вы хотите больше места между пулями и контентом.
Решение, для которого я остановился, в конце концов состояло в том, чтобы изменить изображение для добавления некоторого интервала.
Использование фонового изображения на ли, поскольку некоторые предлагают работу во многих случаях, но не удается, когда список используется вместе с плавающим изображением (например, чтобы текст обернулся вокруг изображения).
Надеюсь, что это поможет.
Или вы можете использовать
list-style-position: inside;
Я думаю, что вы действительно хотите добавить добавление (вы в настоящее время добавляете к <li> ) в <ul> и затем точки маркера будут перемещаться с текстом <li> .
Существует также позиция в стиле списка, в которую вы могли бы посмотреть. Это влияет на то, как линии обтекают изображения пули.
как ответ "darren", но незначительная модификация
li
{
background: url("images/bullet.gif") left center no-repeat;
padding-left: 14px;
margin-left: 24px;
}
он работает в кросс-браузере, просто отрегулируйте отступы и поля
Изменить для вложенных: добавьте этот стиль, чтобы добавить margin-left в суб-вложенный список
ul ul {margin-left: 15px; }
Я использую что-то вроде этого, кажется, довольно чистый & просто для меня:
ul {
list-style: none;
padding: 0; /*removes left padding if unwanted*/
}
li:before {
content: url(/icons/text.gif);
display: inline-block;
vertical-align: middle;
}
vertical-align
, например:
vertical-align: -10px;
/* or */
vertical-align: top;
/* or whatever you need instead of "middle" */
list-style:none
на li
вместо ul
, если хотите.
li:before { margin-right: 1em }
Я считаю, что принятый ответ немного выдумки, слишком уж надо толкнуть с помощью дополнительных команд padding и css.
Я никогда не добавляю отступы, чтобы перечислять элементы лично, обычно контролируя их высоту линии, и иногда достаточно места.
Когда у меня проблема с выравниванием с изображениями стиля пользовательского списка, я просто добавляю пиксель или два дополнительных пространства вокруг любой стороны, чтобы отрегулировать его положение относительно каждой строки списка.
решение с fontawesome
#polyNedir ul li { position:relative;padding-left:20px }
#polyNedir ul li:after{font-family:fontawesome;content:'\f111';position:absolute;left:0px;top:3px;color:#fff;font-size:10px;}
Скройте изображение маркера по умолчанию и используйте background-image
как у вас гораздо больше возможностей, таких как:
li {
background-image: url(https://material.io/tools/icons/static/icons/baseline-add-24px.svg);
background-repeat: no-repeat;
background-position: left 50%;
padding-left: 2em;
}
ul {
list-style: none;
}
<ul>
<li>foo</li>
<li>bar</li>
</ul>