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

StackOverflow https://stackoverflow.com/questions/1123393

  •  13-09-2019
  •  | 
  •  

Вопрос

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

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

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

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

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

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

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

Спасибо,

Джесси

Это было полезно?

Решение

Для этого вы можете использовать классы 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) }

Другие советы

вы могли бы использовать пядь в качестве альтернативы

<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}

да, что - то вроде этого

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

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

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

css будет выглядеть примерно так:

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

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

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

  • <\img> материал
  • <\diff img> еще кое-что

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top