Jump to content
  • 0

Оффсет для списка


betmakh
 Share

Question

Всем доброго времени суток!

Интересует такой вопрос: как делать отступы для элементов списка <li>, да не простые, а такие чтобы отступ каждого последующего элемента увеличивался по сравнению с предыдущим на некое заданное значение как здесь: http://prntscr.com/3ucu83

 

Как сделать чтобы отступ каждого последующего элемента списка был больше отступа предыдущего элемента?

 

Есть ли какой нибудь универсальный псевдокласс или элемент где можно бы было задать параметр увеличения отступа, чтобы не прописывать отступ на каждом элементе отдельно?

Edited by betmakh
Link to comment
Share on other sites

20 answers to this question

Recommended Posts

  • 0

Как вариант, можно вкладывать ul друг в друга.

<ul><li>Тест</li><ul><li>Тест 2</li><ul><li>Тест 3</li></ul></ul></ul>

А для <ul> применить отступ

ul {padding:0 0 0 10px;}

Не совсем понял, что требуется, ибо ссылка на пример выдает 404

Link to comment
Share on other sites

  • 0

Как вариант, можно вкладывать ul друг в друга.

<ul><li>Тест</li><ul><li>Тест 2</li><ul><li>Тест 3</li></ul></ul></ul>

А для <ul> применить отступ

ul {padding:0 0 0 10px;}

Не совсем понял, что требуется, ибо ссылка на пример выдает 404

http://prntscr.com/3ucu83

Link to comment
Share on other sites

  • 0

для каждого пункта списка увеличиваешь padding-left на 50px

 

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

Link to comment
Share on other sites

  • 0

 

для каждого пункта списка увеличиваешь padding-left на 50px

 

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

 

Это так трудно?

Link to comment
Share on other sites

  • 0

 

 

для каждого пункта списка увеличиваешь padding-left на 50px

 

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

 

Это так трудно?

 

 

Это не трудно, и тем не менее мой вопрос остается прежним: есть ли какой нибудь универсальный псевдокласс или элемент где можно бы было задать параметр увеличения отступа, чтобы не прописывать отступ на каждом элементе отдельно?

Link to comment
Share on other sites

  • 0
Как вариант, можно вкладывать ul друг в друга.

<ul> нельзя вкладывать друг в друга. внутри <ul> может быть только <li>

 

Но ведь это совсем не то о чем я справшивал

Это именно то, о чем вы спрашивали.

  • Like 1
Link to comment
Share on other sites

  • 0

Ах, если бы в CSS были переменные...  ^_^


 

Как вариант, можно вкладывать ul друг в друга.

<ul> нельзя вкладывать друг в друга. внутри <ul> может быть только <li>

 

Но большинству все равно, многоуровневые меню в основном так и делаются.

Link to comment
Share on other sites

  • 0

Тут у вас не много вариантов. Либо использовать данный метод

 

Но большинству все равно, многоуровневые меню в основном так и делаются.

Но можно же сделать валидно

 

либо писать это на javaScript http://learn.javascript.ru/css-selectors

Link to comment
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
Answer this question...

×   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.

 Share

  • Similar Content

    • By Bourdun
      Не знаю как это объяснить, смотрите на скриншоты. Как решить эту проблему?
       


    • By leShik
      Попросили добавить текста немного на сайт. Добавил блок со списком, отображение вот такое

      Какие стили отвечают за такое отображение?
      Его стили на данном этапе))
      div style="position: relative; clear: both;"
      "position: absolute; clear: both; z-index: 1000;" - отображает вот так

      почему "type" для ul не отрисовывает маркеры?
      Вроде на дримвивере написан, хотя хз))
    • By Curt54rus
      Есть страничка по адресу http://sale.srfhm.ru/css_bug/
      В ней есть табличка сделанная на UL LI тегах, и вот в ячейке Описание, где выводится описание для типа питания не влезает весь текст и остальную часть не видно, скрывается стилем - overflow: hidden
       
      Пробовал убрать этот overflow, тогда вообще таблица вся разъезжается... 
       
      В верстке не особо силен, подскажите пожалуйста где поправить что, чтобы текст нормально влез и весь отображался... Пробовал уже по всякому, всю голову сломал!
       
      Заранее огромное Спасибо!
    • By Mewow
      Привет всем, делал менюшку на сайте и столкнулся с одной проблемой
      Есть тег div, в нем ul и 5 li в строчку с помощью inline-block
      li должны быть равными по ширине и при том менять её в зависимости от ширины экрана
      на ум пришла только эта идея:
      Поскольку div = 100%  для li я поставил 20% и, как я понимаю, li должны вплотную занять всю ширину div и при том быть не статичными тк %
      но не получается и последняя пятая переходит на новую строчку, когда ставлю 19% то всё влазит, но справа остаётся место и получается не красиво
      в чем дело? Никаких отступов нет, padding 0, что еще занимает место? Или способ не правильный?
      так же думал, что это из за пробелов между блоками,пробовал добавить float: left при этом пробелы между блоками убирались, но при 20% всё равно не влазиют
      сейчас стоит на 19.453% и ,в принципе, все, на вид, вплотную, но это же совсем извращение  как мне кажется и мне всё же интересно почему мой первый вариант не работает
       


    • By VjikZel
      Здравствуйте, в верстке я новичок, поэтому не судите строго за вопрос.
      Сейчас я работаю над сайтом на WP. Мне нужно задать размер шрифта для всех элементов UL на страницах сайта. Как это лучше сделать?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy