Як выраўнаваць элементы спісу ў элеменце <ЮЫ> з маёй <р>?

Я хачу, каб менавіта гэта будзе адлюстроўвацца з дапамогай HTML/CSS:

This is a paragraph.
1. This is a list item.
   Continuation of list item: using list-style-position:outside.
This is another paragraph.

У мяне ёсць праблема ў тым, што мой 1. не выстройваюцца ў чаргу з Thгэта на папярэднім радку). Гэта звязана з уласцівай абіўка левы прысутнічае ў ЮЫ , праўда? Як пазбавіцца ад гэтага паслядоўна ва ўсіх браўзэрах/прылад? Чароўнае Ала {абіўка налева: 22px} падобна на працу (на маім працоўным стале браўзэра, але ён ламаў на маім мабільным браўзэры), але дзе гэтая магія 22px прыходзяць з ?

Для вашага зручнасці вось jsfiddle вы можаце раскашэліцца і пісаць CSS для.

1
Вы заўсёды можаце змяніць ўласцівую абіўку налева, выкарыстоўваючы ЮЫ {абіўку-налева: 0px; }
дададзена аўтар Vivek Sadh, крыніца
Ох .. Я бачу. У гэтым выпадку я думаю, што рашэнне Juhana будзе рабіць трук.
дададзена аўтар Vivek Sadh, крыніца
@Vivek Я была такая ж думка, але, на жаль, што хавае спіс нумарацыі, а таксама.
дададзена аўтар ASGM, крыніца
Ён не хавае, нумарацыю, калі вы выкарыстоўваеце спіс-стыль-становішча: усярэдзіне або калі вы выкарыстоўваеце водступы больш, чым 0 (скажам 20px) - і працу, і яны належным чынам справіцца з ёй.
дададзена аўтар DannyB, крыніца
Я стварыў FIDDLE . Аднак гэта HACK ;) .
дададзена аўтар user1823761, крыніца

7 адказы

Edit 2: here is an example using counter instead of the default numbering. The reason is that, once you get over 9, the digits in the previous example start to break out to the left: http://cdpn.io/izrAh

<!DOCTYPE HTML>

<head>
<meta charset="utf-8">

</head>
<body>


This is a paragraph of text.
  1. This is a list item
    Continuation of list item.
  2. This is a list item
    Continuation of list item.
  3. This is a list item
    Continuation of list item.
  4. This is a list item
    Continuation of list item.
  5. This is a list item
    Continuation of list item.
  6. This is a list item
    Continuation of list item.
  7. This is a list item
    Continuation of list item.
  8. This is a list item
    Continuation of list item.
  9. This is a list item
    Continuation of list item.
  10. This is a list item
    Continuation of list item.
  11. This is a list item
    Continuation of list item.
  12. This is a list item
    Continuation of list item.

This is a paragraph of text. </body> </html>

EDIT1: With list-style: outside (the default) it's easier: http://codepen.io/pageaffairs/pen/tiALm

<!DOCTYPE HTML>

<head>
<meta charset="utf-8">

</head>
<body>


This is a paragraph of text.
  1. This is a list item Continuation of list item.

This is a paragraph of text. </body> </html>

First try: How about something like this:

<!DOCTYPE HTML>

<head>
<meta charset="utf-8">

</head>
<body>


This is a paragraph of text.
  1. This is a list item Continuation of list item.

This is a paragraph of text. </body> </html>

Notes: I've just set a small width on the

    to demonstrate the line wrapping. An alternative is to use
    wherever you want line wrapping.
3
дададзена
Я абнаўлялі пяро з кодам <> спіс-стыль: не . Якія каштоўнасці звычай вы маеце на ўвазе?
дададзена аўтар ralph.m, крыніца
Хм, так. Я проста заўважыў, што, як толькі вы атрымаеце больш за 9, лік распасцірацца налева, таму я дадаў трэці прыклад (гл верхавіны паста), які выкарыстоўвае зусім іншую стратэгію, і працуе значна лепш (і раздзірае ад свабодных 18px рэч).
дададзена аўтар ralph.m, крыніца
Добра, я дадаў другі прыклад спіс-стыль: знешні (які па змаўчанні, таму ён наогул не патрэбны). Гэта на самай справе нашмат прасцей, як гэта. (Я бачыў, што раней.) Я таксама абнавіў ручку.
дададзена аўтар ralph.m, крыніца
Я сказаў, «выгляд», таму што я думаў, што выраўноўванне не было ў парадку, але яна ёсць. Таму я хацеў бы назваць гэта выправіць, пакуль значэння не атрымаць шырыню больш за 4 лічбаў.
дададзена аўтар Mathijs Flietstra, крыніца
@ Ralph.m - Вы маглі б збольшага выправіць, выкарыстоўваючы : пасля псеўда-элемента. <�Код> Li: пасля таго, як {змест: АТР (значэнне); пазіцыя: абсалютная; Злева направа: 0px; топ: 0px; Дысплей: блок; колер фону: #fff;} . codepen.io/seraphzz/pen/nvqxe .
дададзена аўтар Mathijs Flietstra, крыніца
Безнадзейны. Чым больш пісакі вы наваліцца, тым больш зменных вы прывядзеце, і тым менш верагоднасць таго, каб працаваць ва ўсіх браўзэрах аднолькава.
дададзена аўтар artagnon, крыніца
Паглядзіце на
  • радок у скрыпку я адправіў.
  • дададзена аўтар artagnon, крыніца
    Трохі змененая версія гэтага не дрэнна: codepen.io/seraphzz/pen/kEhvc | Тым не менш, прыстасаваныя значэння для літый не працуюць у цяперашні час.
    дададзена аўтар artagnon, крыніца
    Магічнае лік: 18px .
    дададзена аўтар artagnon, крыніца
    Паглядзіце, што адбываецца, калі я хачу спіс стылі тыпу: знешні ? [Выбачайце пра памылку друку ў арыгінальны пытанне]: codepen.io/seraphzz/pen/lAnre
    дададзена аўтар artagnon, крыніца

    Як ужо згадвалася, вы можаце наладзіць ўласцівасць запаўнення. Вам таксама можа спатрэбіцца ўсталяваць он-спіс стыль-пазіцыю.

    ol { list-style-position:inside; padding:0; }
    

    Fiddle

    Калі па нейкай прычыне, вы павінны выкарыстоўваць спіс-стыль-пазіцыю: за межамі , а затым проста павялічыць левы водступ каля 20px (адлегласці паміж нумарам і тэкстам) для дасягнення аналагічнага выніку.

    ol { list-style-position:outside; padding-left:20px; }
    

    Fiddle

    2
    дададзена
    @RamkumarRamachandra - Так, вы маеце рацыю. Можа быць, з дапамогай ет будзе выправіць тое, як гэта залежыць ад памер шрыфта . Настройка абіўка левы: 1.3em; фіксуе гэта ў маёй скрыпкай ніжэй, і ён застаецца выраўнаваны пры змене памеру шрыфта .
    дададзена аўтар Mathijs Flietstra, крыніца
    @RamkumarRamachandra - The 20px не з'яўляецца магічным лікам, гэта роўна водступу левы , які вы ўсталявалі на DIV . Гэта мае сэнс для мяне, каб захаваць падол тое ж самае, калі вы хочаце, каб выраўнаваць іх.
    дададзена аўтар Mathijs Flietstra, крыніца
    няма ... абіўка вы павінны даць ПР фіксавана. Гэта адлегласць паміж нумарам і тэкстам ці што. Як і ў гэтым скрыпку jsfiddle.net/DannyB/2VFnx/5
    дададзена аўтар DannyB, крыніца
    Такім чынам, вы атрымаеце менавіта тое, што вы плаціце за .... пазіцыю спісу звонку, ставіце нумар звонку. Калі вы хочаце, каб «падштурхнуць іх назад у» проста павялічце левае значэнне дапаўненні.
    дададзена аўтар DannyB, крыніца
    Я не ў стане прайграць гэта зацвярджэнне. Глядзіце гэтую абноўленую скрыпка jsfiddle.net/DannyB/2VFnx/2
    дададзена аўтар DannyB, крыніца
    Неа, то абіўка левы з DIV не мае нічога агульнага з гэтым нумарам. Скрыпку @DannyB размясціў мае DIV з водступу левы роўны 50px .
    дададзена аўтар artagnon, крыніца
    Гэта на самай справе не «фіксаванай» гэта? Ці з'яўляецца 20px нейкі магічны лік? (22px, здаецца, працуе трохі лепш). Ці не ёсць гэта магічнае лік шрыфта/дазвол залежыць?
    дададзена аўтар artagnon, крыніца
    Ой, прабачце. Я выкарыстоўваю спіс-стыль-пазіцыі: звонку . На жаль пра памылку друку ў пытанні: я хачу працяг лініі на лінію з тэкстам, а не колькасць. См jsfiddle.net/artagnon/2VFnx/3
    дададзена аўтар artagnon, крыніца
    Настройка набіванне або абіўка левы у 0 не паважае водступ кантэйнера: так што, калі ўся гэтая рэч знаходзіцца ўнутры DIV з пракладкай, складнікі спісаў вырвацца з DIV . [Пачакайце, я буду рыхтаваць скрыпку]
    дададзена аўтар artagnon, крыніца

    If the only reason you're not using

     is that you want line wrapping:
    
    
    p {
        font-family: monospace;
        white-space: pre-wrap;
    }
    

    http://jsfiddle.net/T59Ha/3/
    1
    дададзена
    @RamkumarRamachandra аб тым, што вы выкарыстоўваеце монашырынныя шрыфты, калі вы не робіць яго больш цяжкім, не прасцей, для людзей, каб прыдумаць адпаведныя адказы.
    дададзена аўтар ASGM, крыніца
    Я сапраўды не выкарыстоўваецца монашырынны шрыфт (я толькі сказаў, што для тлумачэння), так што немагчыма атрымаць працяг лініі элемента спісу выбудоўвацца з папярэдняга радка, калі я не выкарыстоўваю <�ЮЫ> . [Абноўлены пытанне, каб пазбегнуць блытаніны]
    дададзена аўтар artagnon, крыніца

    Калі ў вас ёсць знешні выгляд з дапамогай інструментаў распрацоўніка Chrome, вы можаце бачыць, што ліст стыль карыстацкага агента задае ўласцівасць з імем -webkit-набіванне-старт у 40px на < код> ЮЫ , тое ж самае дакладна і для Firefox. Ігнараванне гэтага ўласцівасці, усталяваўшы абіўку левага у 1.3em будзе выбудоўвацца рэчамі для вас ва ўсіх браўзэрах. <�Код> 1.3em , здаецца, заўсёды будзе роўная адлегласці паміж нумарам і тэкстам LI незалежна ад памеру шрыфта як <�код > ет значэнне вылічаецца на аснове памер шрыфта .

    ol {
        list-style-position: outside;
        padding-left: 1.3em;
    }
    

    Here's a jsFiddle

    1
    дададзена
    Вылічанае значэнне 1em залежыць ад памеру шрыфта. Але я скапіяваў яго няправільна з майго браўзэра, яго на самай справе 40px тут таксама (апошняя версія Chrome). Я палатаю яго ў адказ. Выкарыстанне скіду або нармалізуюць табліцы стыляў дапаможа вам пераканацца, усё робяць адны і тыя ж ва ўсіх браўзэрах.
    дададзена аўтар Mathijs Flietstra, крыніца
    Я адрамантаваў мой адказ, каб адлюстраваць тое, што я лічу, на самай справе выпраўляе праблему выраўноўвання, усталяваўшы памер шрыфта на аснове ет значэнне як водступу левы значэнне на ЮЫ .
    дададзена аўтар Mathijs Flietstra, крыніца
    Так, і яна не дасканалая на сафары на маім ноўтбуку, альбо, я думаю, што няма ніякага іншага шляху, акрамя як высветліць, якія ет значэнне працы, для якіх браўзэры, а затым выкарыстоўваць некаторыя браўзэра канкрэтных дзівацтваў , каб атрымаць яго, каб зрабіць права ва ўсіх браўзэрах.
    дададзена аўтар Mathijs Flietstra, крыніца
    Не, 1.3em не лепшы: да гэтага часу ламае ў браўзэры майго тэлефона.
    дададзена аўтар artagnon, крыніца
    Так, 1em залежыць ад памеру шрыфта, але я не ведаю, што павінен рабіць нічога. Я ўжо з дапамогай скіду/Нармалізацыя, і яна выдатна працуе. Мая праблема з жорсткага кадавання магіі 20px (як я ўжо сказаў, 22px , здаецца, працуе лепш для мяне).
    дададзена аўтар artagnon, крыніца
    Не -webkit-набіванне-старт залежыць ад шматлікіх фактараў? Для мяне, у гэтым браўзэры, гэта 40px . А што гэта магія 20px , што лініі ўсё дагары ( 22px працуе лепш для мяне)? Ці ёсць нейкі спосаб гэта вар'яцтва?
    дададзена аўтар artagnon, крыніца

    Вы можаце паспрабаваць:

    ol { list-style-type: none; 
      margin: 0; 
      padding: 0;
    }
    

    Для элементаў проста выкарыстоўваць перанос слоў: нармальны; ў стылізацыі

    1
    дададзена
    @Jeff гэта не робіць.
    дададзена аўтар ASGM, крыніца
    Гэта рашэнне тоіць нумарацыю спісу, на жаль.
    дададзена аўтар ASGM, крыніца
    Проста выдаліце ​​спіс-стыль-тыпу з дэкларацыі і паглядзець, калі гэта працуе.
    дададзена аўтар jeff, крыніца
    Я хачу, каб лік!
    дададзена аўтар artagnon, крыніца

    Without changing the CSS, you can achieve the feat with a
    tag as in:


    Previous paragraph

    • Test here
      And there

    Next paragraph

    Для таго, каб дасягнуць гэтага з дапамогай CSS, вы можаце паглядзець на тое, як

  • and
    are setup.

    Quick note: it works with

      too, of course.
  • 0
    дададзена

    Выкарыстоўвайце скід CSS/нармалізуюць, усталяваць карыстацкія абіўка левы , і выкарыстоўваць мета-тэг краявідных для мабільных прылад.

    0
    дададзена
    <�Код> 1.3em , здаецца, значэнне для IE, Firefox і Chrome на працоўным стале, а не Safari.
    дададзена аўтар Mathijs Flietstra, крыніца
    См гэта codepen тут рашэнне, якое працуе.
    дададзена аўтар Mathijs Flietstra, крыніца
    Я ўпэўнены, што вы можаце паказаць памер шрыфта на псеўда элементаў?
    дададзена аўтар Mathijs Flietstra, крыніца
    Я паспрабаваў Chrome, IE і Firefox, гэта здаецца добра для мяне на тых, таксама: Вы можаце атрымаць перыяды там:
    дададзена аўтар Mathijs Flietstra, крыніца
    Хм, па-ранейшаму не працуе належным чынам. <�Код> Змест: адлюстроўваецца па-рознаму ў розных браўзэрах (памер шрыфта).
    дададзена аўтар artagnon, крыніца
    Проста паспрабуйце. Гэта нават больш, чым зламаны арыгінальнае рашэнне, таму што ёсць так шмат іншых зменных.
    дададзена аўтар artagnon, крыніца
    Там вельмі простае рашэнне, і я толькі што знайшоў яго.
    дададзена аўтар artagnon, крыніца