Буллит списка без обтекания

[Светлана Г.]

Вроде бы несложная задачка, но споткнулась на ней.

 

Нужно, чтобы сам текст не обтекал буллит. Так:

 

Сверстано так:

a:before{	content:'';	display:inline-block;	width:6px;	height:6px;	border-radius:50%;	background:#464646;	margin-right:8px;	vertical-align:middle;}

Возможно ли это?

[psywalker]

Вроде бы несложная задачка, но споткнулась на ней.

 

Нужно, чтобы сам текст не обтекал буллит. Так:

 

Сверстано так:

a:before{	content:'';	display:inline-block;	width:6px;	height:6px;	border-radius:50%;	background:#464646;	margin-right:8px;	vertical-align:middle;}

Возможно ли это?

А почему бы просто не использовать это? Результат не устраивает?

[afdw]

http://jsfiddle.net/tnq5g658/2/

 

 

А почему бы просто не использовать это? Результат не устраивает?

 

Цвет можно менять! http://jsfiddle.net/b7j25ug3/1/

 

А размер нет 

Edited December 18, 2014 by afdw

[psywalker]

http://jsfiddle.net/tnq5g658/2/

 

 

А почему бы просто не использовать это? Результат не устраивает?

 

Цвет можно менять! http://jsfiddle.net/b7j25ug3/1/

 

А размер нет 

А если вставить текст в абзац или спан?

[Светлана Г.]

 

Вроде бы несложная задачка, но споткнулась на ней.

 

Нужно, чтобы сам текст не обтекал буллит. Так:

 

Сверстано так:

a:before{	content:'';	display:inline-block;	width:6px;	height:6px;	border-radius:50%;	background:#464646;	margin-right:8px;	vertical-align:middle;}

Возможно ли это?

А почему бы просто не использовать это? Результат не устраивает?

 

Размер немного меньше получается.

http://jsfiddle.net/tnq5g658/2/ - должен подойти.

[psywalker]

А мне почему-то релатив не очень нравится, ибо он оставляет за собой местечко, поэтому я предпочитаю более честный вариантик)

[Светлана Г.]

У меня список ссылок:

<ul>                    	<li><a href="#">Название подкатегории длинное длинное длинное длинное </a></li>                        <li><a href="#">Название подкатегории</a></li>                        <li><a href="#">Название подкатегории</a></li>                        <li><a href="#">Название подкатегории</a></li>                        <li><a href="#">Название подкатегории</a></li>                    </ul>

[Светлана Г.]

Получилось даже без оборачивания в <span>: http://jsfiddle.net/b7j25ug3/6/

 

Спасибо всем огромное за помощь! Отдельное спасибо psywalker.

Edited December 18, 2014 by Светлана Г.

[Z1gnet]

я в таких случаях пользуюсь абсолютом. и не надо марджином тягать и все обтекает как надо

[Great Rash]

http://jsfiddle.net/b7j25ug3/7/

[Светлана Г.]

http://jsfiddle.net/b7j25ug3/7/

 

Это SVG ? Никак не займусь его изучением, а надо бы. Где об этом почитать?

А насколько это кроссбраузерно? 

 

 

Исправила под свои требования.

http://jsfiddle.net/b7j25ug3/8/

Edited December 19, 2014 by Светлана Г.

[Great Rash]

Это SVG ?

Да.

Никак не займусь его изучением, а надо бы. Где об этом почитать?

Я пользуюсь этим ресурсом - http://tutorials.jenkov.com/svg/index.html

А насколько это кроссбраузерно?

Если вместо SVG вставить картинку, то будет работать вообще везде. А так - ИЕ9+

[Светлана Г.]

 

Это SVG ?

Да.

Никак не займусь его изучением, а надо бы. Где об этом почитать?

Я пользуюсь этим ресурсом - http://tutorials.jenkov.com/svg/index.html

А насколько это кроссбраузерно?

Если вместо SVG вставить картинку, то будет работать вообще везде. А так - ИЕ9+

 

 

Спасибо!

[mishka]

можно просто текст вставить: •

 

Тогда размер и цвет можно менять стилями: font-size и color соответственно.
Если к буллету применить float, а не inline-block, тогда при большом отрицательном левом отступе он не будет за собою вытягивать текст.

 

http://jsfiddle.net/b7j25ug3/16/

[psywalker]

можно просто текст вставить: •

 

Тогда размер и цвет можно менять стилями: font-size и color соответственно.

Если к буллету применить float, а не inline-block, тогда при большом отрицательном левом отступе он не будет за собою вытягивать текст.

 

http://jsfiddle.net/b7j25ug3/16/

Воо, вот это самый лучший из всех представленных способов, имхо

[Светлана Г.]

можно просто текст вставить: •

Тогда размер и цвет можно менять стилями: font-size и color соответственно.

Если к буллету применить float, а не inline-block, тогда при большом отрицательном левом отступе он не будет за собою вытягивать текст.

http://jsfiddle.net/b7j25ug3/16/

В задании требуется, чтобы маркер также менял цвет, как и ссылка, при наведении. Вот работает:

http://jsfiddle.net/b7j25ug3/18/

Edited December 20, 2014 by Светлана Г.

[Светлана Г.]

Мой буллит стал не круглым, а вытянутым. Почему?

[Q4Dizzy]

Покажите пример или напишите ссылку, где оно у вас вытянулось.

[Светлана Г.]

Покажите пример или напишите ссылку, где оно у вас вытянулось.

Вот ссылка.

Edited December 20, 2014 by Светлана Г.

[psywalker]

 

Покажите пример или напишите ссылку, где оно у вас вытянулось.

Вот ссылка.

 

У меня ничего не вытягивается. В каком браузере проблема?

[afdw]

Мой буллит стал не круглым, а вытянутым. Почему?

 

А шрифт вы используете какой?  http://jsfiddle.net/4L46z9dz/

Edited December 20, 2014 by afdw

[Светлана Г.]

 

 

Покажите пример или напишите ссылку, где оно у вас вытянулось.

Вот ссылка.

 

У меня ничего не вытягивается. В каком браузере проблема?

 

Chrome.

 

Мой буллит стал не круглым, а вытянутым. Почему?

 

А шрифт вы используете какой?  http://jsfiddle.net/4L46z9dz/

 

Да, я так тоже подумала Спасибо!