Я хочу иметь «внутренний» список со списком маркеров или десятичных чисел, которые все вровень с превосходящими текстовыми блоками. Вторые строки записей списка должны иметь такой же отступ, как и первая строка!
Например:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec quam felis,
1. Text
2. Text
3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
second line of longer Text
4. Text
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor.
CSS предоставляет только два значения для его "list-style-position" - внутри и снаружи. С "внутренними" вторыми строками заподлицо с точками списка, а не с верхней строкой:
3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
second line of longer Text
4. Text
Ширина "вне" моего списка больше не совпадает с улучшенными текстовыми блоками.
Ширина эксперимента text-indent, padding-left и margin-left работает для неупорядоченных списков, но они не работают для упорядоченных списков, потому что это зависит от количества символов в десятичном числе списков:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor.
3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
second line of longer Text
4. Text
11. Text
12. Text
"11." и "12." не совпадают с превосходящим текстовым блоком по сравнению с «3». и "4".
Так в чем же секрет упорядоченных списков и отступа второй строки? Спасибо за ваши усилия!
источник
Ответы:
Обновить
Этот ответ устарел. Вы можете сделать это намного проще, как указано в другом ответе ниже:
Смотрите https://www.w3schools.com/cssref/pr_list-style-position.asp
Оригинальный ответ
Я удивлен, увидев, что это еще не решено. Вы можете использовать алгоритм компоновки таблицы браузера (без использования таблиц) следующим образом:
Демо: http://jsfiddle.net/4rnNK/1/
Чтобы он работал в IE8, используйте устаревшую
:before
нотацию с одним двоеточием.источник
foo
просто произвольная строка (идентификатор), он используется для подключенияcounter-reset
,counter-increment
иcounter()
свойства.position: relative
на<li>
иposition: absolute
на генерируемый контент. См. Jsfiddle.net/maryisdead/kgr4k для примера.40px
? Это сломается, когда счетчики будут шире . Смысл использования макета таблицы в том, что браузер автоматически подгоняет контент.Я верю, что это сделает то, что вы ищете.
JSFiddle: https://jsfiddle.net/dzbos70f/
источник
1em
не равно пробелу. Линии не будут идеально выровнены по пикселям. Во-вторых, а когда список достигает числа 10? 100? Отступ текста не будет работать, он не будет выровнен. Этот ответ должен быть отклонен.1em
. oi60.tinypic.com/a0eyvs.jpg Первый элемент списка использует метод текстового отступа выше. По сравнению с тем, как это обычно выглядит с позицией в стиле списка: снаружи он выровнен, в данном случае - на пиксель.Самый простой и чистый способ, без всяких взломов, это просто сделать отступ
ul
(илиol
) следующим образом:Это дает тот же результат, что и принятый ответ: https://jsfiddle.net/5wxf2ayu/
Скриншот:
источник
list-style-position: outside
в<li>
.Проверьте эту скрипку:
http://jsfiddle.net/K6bLp/
Он показывает, как сделать отступы ul и ol вручную с помощью CSS.
HTML
CSS
Также я отредактировал вашу скрипку
http://jsfiddle.net/j7MEd/3/
Запишите это.
источник
type
атрибут для<ol>
в HTML 5 выглядит устаревшим. Используйтеstyle="list-style-type: "
вместо этого.Вы можете установить поля и отступы либо в CSS,
ol
либоul
в CSS.источник
Я полагаю, вам просто нужно поместить список 'bullet' вне отступов.
источник
Вы можете использовать CSS для выбора диапазона; в этом случае вы хотите элементы списка 1-9:
Затем настройте поля для этих первых элементов соответствующим образом:
Смотрите это в действии здесь: http://www.wortfm.org/wort-madison-charts-for-the-week-beginning-11192012/
источник
Следующий CSS сделал свое дело:
источник
мое решение совершенно так же , как Pumbaa80 одного «s, но я предлагаю использовать
display: table
вместоdisplay:table-row
дляli
элемента. Так будет примерно так:Так что теперь мы можем использовать поля для интервал между
li
«систочник
Я сам очень люблю это решение:
источник
Списки ol, ul будут работать, если вы хотите, вы также можете использовать таблицу с рамкой: нет в css.
источник
CSS предоставляет только два значения для его "list-style-position" - внутри и снаружи. С "внутренними" вторыми строками заподлицо с точками списка, а не с верхней строкой:
В упорядоченных списках, без вмешательства, если вы передадите «list-style-position» значение «inside», вторая строка длинного элемента списка не будет иметь отступа, но вернется к левому краю списка (т.е. будет выравнивать по левому краю с номером элемента). Это характерно для упорядоченных списков и не происходит в неупорядоченных списках.
Если вместо этого вы дадите «list-style-position» значение «outside», вторая строка будет иметь тот же отступ, что и первая строка.
У меня был список с рамкой и была эта проблема. С "list-style-position", установленным на "inside", мой список не выглядел так, как я хотел. Но с «list-style-position», установленным в «outside», номера элементов списка выходили за рамки.
Я решил это, просто установив более широкое левое поле для всего списка, что подтолкнуло весь список вправо, обратно в положение, в котором он был раньше.
CSS:
ol.classname {margin: 0; отступ: 0;}
ol.classname li {margin: 0.5em 0 0 0; padding-left: 0; list-style-position: outside;}
HTML:
источник
Хорошо, я вернулся и выяснил некоторые вещи. Это грубое решение того, что я предлагал, но оно кажется функциональным.
Сначала я сделал номера серией неупорядоченных списков. Неупорядоченный список обычно содержит диск в начале каждого элемента списка (
Затем я сделал отображение всего списка: таблица-строка. Вот почему я просто не вставляю вам код, а не болтаю об этом?
CSS:
}
}
Это похоже на выравнивание текста во втором div с номерами в упорядоченном списке в первом div. Я окружил список и текст тегом, чтобы я мог просто указать всем элементам div отображать их в виде встроенных блоков. Это выровняло их хорошо.
Поле должно быть между пробелом и началом текста. В противном случае они сталкиваются друг с другом, и это выглядит как бельмо на глазу.
Мой работодатель хотел, чтобы обернутый текст (для более длинных библиографических записей) соответствовал началу первой строки, а не левому краю. Первоначально я волновался с положительным полем и отрицательным отступом текста, но затем я понял, что когда я переключился на два разных элемента div, это привело к тому, что текст выровнялся, потому что левый край элемента div был край, где текст естественно начался. Таким образом, все, что мне было нужно, это запас на 0,2 метра, чтобы добавить пространство, а все остальное выстроилось ровно.
Надеюсь, это поможет, если у ОП возникла похожая проблема ... Мне было трудно понять его / ее.
источник
У меня возникла такая же проблема, и я начал использовать ответ user123444555621 . Однако мне также нужно было добавить
padding
и aborder
к каждомуli
, что это решение не позволяет, потому что каждыйli
является atable-row
.Во-первых, мы используем
counter
для репликацииol
чисел.Затем мы устанавливаем
display: table;
на каждомli
иdisplay: table-cell
на,:before
чтобы дать нам отступ.Наконец, сложная часть. Поскольку мы не используем макет таблицы в целом,
ol
мы должны убедиться, что каждый из них:before
имеет одинаковую ширину. Мы можем использоватьch
единицу, чтобы примерно сохранить ширину, равную количеству символов. Чтобы сохранить одинаковую ширину, когда количество цифр для них:before
различается, мы можем реализовать количественные запросы . Предполагая, что вы знаете, что ваши списки не будут состоять из 100 или более элементов, вам нужно только одно правило количественного запроса, чтобы указать:before
изменение его ширины, но вы можете легко добавить больше.источник