CSS для воссоздания LI с помощью маркера, но без использования LI - PullRequest
Новая
       18

CSS для воссоздания LI с помощью маркера, но без использования LI

2 голосов
/ 14 июля 2009

Я пытаюсь создать макет, который выглядит как LI с маркером, но в нем не используется LI. Я не могу использовать LI, потому что хочу, чтобы разные элементы в одном списке имели разные маркированные изображения. И из того, что я могу сказать, стили маркеров LI могут быть установлены только в UL, поэтому все LI в одном UL должны иметь одно и то же изображение маркера ... и я этого не хочу. Пожалуйста, поправьте меня, если я ошибаюсь относительно того, как можно оформить LI.

Вот HTML-код, который я пытаюсь стилизовать, чтобы он воссоздает маркер LI. 

<div><img src="..."/><p>Inbox:</p></div>

Я не уверен, как лучше всего достичь следующих целей:

  • Отображение изображения маркера слева от текстового поля элемента, чтобы при большом количестве текста маркер висел на левом поле. Текст не должен помещаться под изображение маркера.
  • Держите изображение маркера выровненным по центру с первой строкой текста (в случае переноса текста). И держите середину маркера выровненной, когда текст изменится.

Моя главная цель - воссоздать Пользовательский интерфейс TaskPaper на веб-странице:

Я буду рад предоставить бесплатную лицензию человеку с решением, которое мне нравится больше всего.

Спасибо

Джесси

Ответы [ 5 ]

5 голосов
/ 14 июля 2009

Для этого вы можете использовать классы CSS: 

<HTML>
  <HEAD>
    <STYLE>
      LI.circle { list-style: circle }
      LI.square { list-style: square }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI class="circle">Circle</LI>
      <LI class="square">Square</LI>
      <LI>Third</LI>
  </BODY>       
</HTML>

А если вам нужно произвольное изображение, перейдите как LI.whatever { list-style: url(myimage.png) }

1 голос
/ 23 апреля 2012

@ Dels - Ваш пример использования LI с IMG внутри будет работать, потому что вы все еще используете элемент LI перед каждым изображением. Эффект был бы что-то вроде

  • <\ img> материал
  • <\ diff img> больше вещей

У вас все еще будет обычный стиль маркера, но с изображением рядом с ним. Я думаю, что вы пытались скрыть это с помощью изображения, обойдя его, но если это сработает, в чем я даже не уверен, я думаю, вам придется использовать отрицательное левое поле.

1 голос
/ 22 февраля 2012

Если вы не хотите создавать список и хотите поместить маркеры в ссылку, вы можете сделать это следующим образом: 

<a id="bulletlink" href="">hey</a>

CSS будет выглядеть так: 

bulletlink{
background-image:url(../some/bullet.png) 0px 6px no-repeat;
padding-left:10px;
}

Изображение представляет собой простой черный круг размером 8 на 8 пикселей с прозрачным фоном, и вы добавляете привязку или текст, чтобы они не перекрывали маркер. Очевидно, что вы можете сделать это практически для всего, включая div, изображения, текст, заголовки и т. Д., Вам просто нужно иметь возможность добавить фоновое изображение.

1 голос
/ 14 июля 2009

Вы также можете использовать list-style-type: none; а затем использовать фоновое изображение

1 голос
/ 14 июля 2009

вы можете использовать span в качестве альтернативы 

<span><img src="">text</img></span>

или вы можете использовать ul по умолчанию , но с различными изображениями для каждого li 

<ul>
<li><img src="image1">text1</img></li>
<li><img src="image2">text2</img></li>
</ul>

затем выровняйте поля каждого изображения по li с помощью css 

li img{margin-left: 5px}

да что-то в этом роде

...