Jump to content
  • Sign Up

Выравнивание пунктов списка с добавленным элементом


Recommended Posts

День добрый! Набиваю руку в простенькой верстке придуманного мной сайта. Возникла проблема из за которой рву на себе волосы уже 2е сутки - это выравнивание пункта текста с добавленной картинкой вместо привычных точек. Перепробовал уже все,с list-style-image вообще сделать что либо бесполезно. Перешел на изменения в самом <li>, текст просто накладывается на картинку и сделать ничего не получается. Размер картинки 64x64. Поиски в интернете успехом не увенчались. 

Ниже мой сырой код по этому вопросу:

li {
list-style-type: none;

}
li:before{
content: url("http://s1.iconbird.com/ico/2013/9/447/w128h12813804433922.png");
width: 30px;
height: 30px;
display: grid;
margin-top: 2%;
}

Должно получится как на картинке:

 

unnamed.png

Link to post
Share on other sites

Здравствуйте.

В качестве примера могу предложить такой вариант:

Link to post
Share on other sites

Почему то не отображает саму картинку, остаются точки, так как list-style-type: none; пришлось удалить. Я на самом деле вообще не могу понять почему не получается, т.к. у вас очень доступный пример, но отображения нету у меня.

Link to post
Share on other sites

Не могу знать почему у Вас не так. попробуйте воспроизвести Ваш пример на jsfiddle

Link to post
Share on other sites
12 часов назад, AndrewLite сказал:

Почему то не отображает саму картинку, остаются точки, так как list-style-type: none; пришлось удалить. Я на самом деле вообще не могу понять почему не получается, т.к. у вас очень доступный пример, но отображения нету у меня.

смотрите может стили наследуются

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Member Statistics

    46,971
    Total Members
    1,451
    Most Online
    SkyMantle
    Newest Member
    SkyMantle
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Свежие Темы

  • Последние сообщения

    • seoreef
      Вы удивитесь, но многих вебмастеров от освоения англоязычного сегмента рынка останавливает именно незнание языка. Как коммуницировать с клиентами? Где искать англоязычных авторов? Кто проверит написанный на английском текст? Став клиентом компании Seoreef, вы не будете забивать себе голову этими вопросами, поскольку мы возьмем на себя все задачи по контенту. Вам останется лишь наблюдать, как стремительно растёт трафик на сайте. Интересно? Тогда пишите нам в телеграм или скайп.
    • Tucha
      TuchaKube — сервис предоставления контейнерной инфраструктуры и автоматизации CI/CD-процессов TuchaKube — это платформа на базе кластеров Kubernetes для автоматизации CI/CD-процессов, хостинга приложений и их данных в облаке контейнеров. Платформа создана для разработки программных продуктов и строительства высоконагруженных информационных систем. Сервис обеспечивает автоматический запуск таких процессов, как сборка, компиляция, тестирование, упаковка, контейнеризация и публикация приложения как в тестовой, так и в производственной средах. Среди возможностей работы — сбор и хранение статистических данных, мониторинг, кластеризация, горизонтальное масштабирование и многое другое. А одна из главных особенностей сервиса — автоматизация CI/CD-процессов при помощи DevOps-инженеров Tucha. Приглашаем оценить возможности мощной платформы TuchaKube! Для реальных веб-проектов готовы предоставить бесплатный тестовый период. Узнать подробнее о сервисе можно на нашем сайте: https://tucha.ua/ru/services/tuchakube. А если у вас появились вопросы, звоните нам по номеру +380 44 583-5-583 или пишите на электронную почту: [email protected].  
    • finevpn
      По слухам, в Android 12, Google хочет внедрить по умолчанию протокол VPN WireGuard (источник https://www.techradar.com/news/google-quietly-adds-revolutionary-vpn-protocol-to-next-android-os ) Что говорит о его надежности и качестве. Мы со своей стороны уже сейчас усиленно работаем, для того, чтобы дать WireGuard VPN всем нашим пользователям.  Некоторым клиентам мы давали тестовые доступы, и отзывы великолепные, и сами тестируем данный протокол, все прям очень и очень хорошо 😉 По срокам, говорить пока не могу 😒 серверов много, и не так легко внедрить новый протокол везде, но мы работаем над этим.  Пока же у нас доступно подключение по Open VPN, L2TP и не менее известный и качественный чем WireGuard Softether VPN.  Все это бесплатно и без ограничений на https://finevpn.org/ или в телеграм боте: https://t.me/FineVPNbot P.S. 29.08.2020 мы обновили кошелек для Donation на сайте, сегодня 16.10.2020, нам поступило 27 переводов на общую сумму 1 830,43 $. Всем большое спасибо.  Скриншот: https://take.ms/sLAGm6   URL: https://www.blockchain.com/btc/address/36K6svHZBbQ4NL6vouu9o9n6jZhJR3Byrp?page=1 Постараемся делать такие отчеты ежемесячно. 
  • Popular Contributors

    Nobody has received reputation this week.

×
×
  • Create New...