Hoe kan jy pas die getalle in'n geordende lys?
https://stackoverflow.com/questions/10877
-
08-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianVra
Hoe kan ek links-pas die getalle in'n geordende lys?
1. an item
// skip some items for brevity
9. another item
10. notice the 1 is under the 9, and the item contents also line up
Verander die karakter na die nommer in'n geordende lys?
1) an item
Ook is daar'n CSS oplossing om te verander van die nommers om te alfabetiese/romeinse lyste in plaas van die gebruik van die tipe kenmerk op die ol element.
Ek is veral geïnteresseerd in die antwoorde wat werk op Firefox 3.
Oplossing
Dit is die oplossing wat ek werk in Firefox 3, Opera en Google Chrome. Die lys nog vertoon in IE7 (maar sonder die noue bracket en links belyn getalle):
ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
display: block;
margin-bottom: .5em;
margin-left: 2em;
}
li::before {
display: inline-block;
content: counter(item) ") ";
counter-increment: item;
width: 2em;
margin-left: -2em;
}<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine<br>Items</li>
<li>Ten<br>Items</li>
</ol>
Edit: Ingesluit verskeie lyn fix deur strager
Daar is ook 'n CSS oplossing te verander van getalle tot alfabetiese / Romeinse lyste in plaas van die gebruik van die tipe kenmerk op die ol element.
Sien href="http://www.w3.org/TR/CSS2/generate.html#lists" rel="noreferrer"> lys-styl-tipe CSS eiendom li::before {
content: counter(item, upper-roman) ") ";
counter-increment: item;
/* ... */
Ander wenke
Die CSS vir stilering lyste is hier , maar is basies:
li {
list-style-type: decimal;
list-style-position: inside;
}
Die spesifieke uitleg jy na kan waarskynlik slegs bereik word deur delf in die ingewande van die uitleg met iets soos hierdie (let op dat ek nie eintlik probeer dit):
ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }
Jy kan ook spesifiseer jou eie getalle in die HTML - bv.as die getalle is verskaf deur'n databasis:
<ol>
<li seq="1">Item one</li>
<li seq="20">Item twenty</li>
<li seq="300">Item three hundred</li>
</ol>
Die seq skryf sigbaar gemaak word met behulp van'n metode soortgelyk aan dié wat in ander antwoorde.Maar in plaas van die gebruik van content: counter(foo), ons gebruik content: attr(seq):
ol {
list-style: none;
}
ol > li:before {
content: attr(seq) ". ";
}
gesteel het 'n baie van hierdie uit ander antwoorde, maar dit is besig om in FF3 vir my. Dit het upper-roman, uniform insp, 'n beslote bracket.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<style type="text/css">
<!--
ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
margin-bottom: .5em;
}
li:before {
display: inline-block;
content: counter(item, upper-roman) ")";
counter-increment: item;
width: 3em;
}
-->
</style>
</head>
<body>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
</ol>
</body>
</html>
Ek stel voor speel met die teenwoordigheid van attribuut en sien wat jy kan bereik met dit. Dit sal beteken jou kode werklik is beperk tot lekker nuwe implementeer, en sluit die (lastig groot) deel van die mark nog steeds met behulp rommel ou implementeer,
Iets soos die volgende, wat forseer 'n vaste met op die items. Ja, ek weet dit is minder elegant te hê om die wydte jouself kies, maar met behulp van CSS vir jou uitleg is soos onderdak polisie werk: hoe goed jou motiewe, dit altyd kry morsige
.li:before {
content: counter(item) ") ";
counter-increment: item;
display: marker;
width: 2em;
}
Maar jy gaan hê om te eksperimenteer om die presiese oplossing te vind.
Die getalle line-up beter as jy lei-nulle byvoeg om die getalle, deur die oprigting van lys-styl-tipe om:
ol { list-style-type: decimal-leading-zero; }
Geleende en antwoord verbeterde Marcus Downing se . Getoets en werk in Firefox 3 en Opera 9. Ondersteun verskeie lyne ook.
ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
display: block;
margin-left: 3.5em; /* Change with margin-left on li:before. Must be -li:before::margin-left + li:before::padding-right. (Causes indention for other lines.) */
}
li:before {
content: counter(item) ")"; /* Change 'item' to 'item, upper-roman' or 'item, lower-roman' for upper- and lower-case roman, respectively. */
counter-increment: item;
display: inline-block;
text-align: right;
width: 3em; /* Must be the maximum width of your list's numbers, including the ')', for compatability (in case you use a fixed-width font, for example). Will have to beef up if using roman. */
padding-right: 0.5em;
margin-left: -3.5em; /* See li comments. */
}
Daar is die Tipe kenmerk wat jou toelaat om die nommeringstelsel styl verander, maar jy kan die punt nie verander na die nommer / brief.
<ol type="a">
<li>Turn left on Maple Street</li>
<li>Turn right on Clover Court</li>
</ol>
Die dokumente sê met betrekking tot list-style-position : outside
CSS1 nie die presiese ligging van die boks merker spesifiseer en vir redes van verenigbaarheid, CSS2 bly ewe dubbelsinnig. Vir meer akkurate beheer van merker bokse, gebruik asseblief merkers.
Verder op daardie bladsy is die dinge oor merkers.
Een voorbeeld is:
LI:before {
display: marker;
content: "(" counter(counter) ")";
counter-increment: counter;
width: 6em;
text-align: center;
}
Nope ... net gebruik om 'n DL:
dl { overflow:hidden; }
dt {
float:left;
clear: left;
width:4em; /* adjust the width; make sure the total of both is 100% */
text-align: right
}
dd {
float:left;
width:50%; /* adjust the width; make sure the total of both is 100% */
margin: 0 0.5em;
}
Ek het dit. Probeer die volgende:
<html>
<head>
<style type='text/css'>
ol { counter-reset: item; }
li { display: block; }
li:before { content: counter(item) ")"; counter-increment: item;
display: inline-block; width: 50px; }
</style>
</head>
<body>
<ol>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ol>
</body>
Die vangs is dat hierdie beslis sal nie werk nie op ouer of minder voldoen blaaier. display: inline-block is 'n baie nuwe eiendom
Quick en vuil alternatiewe oplossing. Jy kan 'n tabulering karakter gebruik saam met vooraf opgemaakte teks. Hier is 'n moontlikheid:
<style type="text/css">
ol {
list-style-position: inside;
}
li:first-letter {
white-space: pre;
}
</style>
en jou html:
<ol>
<li> an item</li>
<li> another item</li>
...
</ol>
Let daarop dat die spasie tussen die li tag en die beggining van die teks is 'n tabulering karakter (wat jy kry wanneer jy druk op die Tab-sleutel in notepad).
As jy nodig het om ouer blaaiers ondersteun, kan jy dit doen in plaas:
<style type="text/css">
ol {
list-style-position: inside;
}
</style>
<ol>
<li><pre> </pre>an item</li>
<li><pre> </pre>another item</li>
...
</ol>
The other answers are better from a conceptual point of view. However, you can just left-pad the numbers with the appropriate number of ' ' to make them line up.
* Note: I did not at first recognize that a numbered list was being used. I thought the list was being explicitly generated.
I will give here the kind of answer i usually don't like to read, but i think that as there are other answers telling you how to achive what you want, it could be nice to rethink if what you are trying to achive is really a good idea.
First, you should think if it is a good idea to show the items in a non-standard way, with a separator charater diferent than the provided.
I don't know the reasons for that, but let's suppose you have good reasons.
The ways propossed here to achive that consist in add content to your markup, mainly trough the CSS :before pseudoclass. This content is really modifing your DOM structure, adding those items to it.
When you use standard "ol" numeration, you will have a rendered content in which the "li" text is selectable, but the number preceding it is not selectable. That is, the standard numbering system seems to be more "decoration" than real content. If you add content for numbers using for example those ":before" methods, this content will be selectable, and dued to this, performing undesired vopy/paste issues, or accesibility issues with screen readers that will read this "new" content in addition to the standard numeration system.
Perhaps another approach could be to style the numbers using images, although this alternative will bring its own problems (numbers not shown when images are disabled, text size for number not changing, ...).
Anyway, the reason for this answer is not just to propose this "images" alternative, but to make people think in the consequences of trying to change the standard numeration system for ordered lists.
This code makes numbering style same as headers of li content.
<style>
h4 {font-size: 18px}
ol.list-h4 {counter-reset: item; padding-left:27px}
ol.list-h4 > li {display: block}
ol.list-h4 > li::before {display: block; position:absolute; left:16px; top:auto; content: counter(item)"."; counter-increment: item; font-size: 18px}
ol.list-h4 > li > h4 {padding-top:3px}
</style>
<ol class="list-h4">
<li>
<h4>...</h4>
<p>...</p>
</li>
<li>...</li>
</ol>
