Sıralı bir listedeki sayıları nasıl sola hizalayabilirim?
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 upSıralı listedeki numaradan sonraki karakter değiştirilsin mi?
1) an itemAyrıca ol öğesinde type özelliğini kullanmak yerine sayılardan alfabetik / roma listelerine geçmek için bir CSS çözümü var.
Çoğunlukla Firefox 3 üzerinde çalışan yanıtlarla ilgileniyorum.
Yanıtlar:
Firefox 3, Opera ve Google Chrome'da çalıştığım çözüm bu. Liste hala IE7'de görüntülenir (ancak köşeli parantez ve sola hizalama numaraları olmadan):
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>DÜZENLEME: Strager tarafından çoklu hat düzeltme dahil
Ayrıca ol öğesinde type özelliğini kullanmak yerine sayılardan alfabetik / roma listelerine geçmek için bir CSS çözümü var.
Bakınız liste tarzı tipi CSS özelliği. Veya sayaçları kullanırken, ikinci bağımsız değişken bir liste stili türü değeri kabul eder. Örneğin, aşağıdakiler üst roma kullanacaktır:
li::before {
content: counter(item, upper-roman) ") ";
counter-increment: item;
/* ... */ol {counter-reset: item; padding-left: 0;} li {display: block; margin-bottom: .5em;} li:before {display: inline-block; content: counter(item) ") "; counter-increment: item; padding-right: 0.8em;}.
Stil listeleri için CSS burada , ancak temelde:
li {
list-style-type: decimal;
list-style-position: inside;
}Ancak, belirli peşinde olduğunuz muhtemelen sadece böyle bir şeyle düzeni içine bağırsaklar delving tarafından sağlanabilir düzeni bu (aslında hiç denemedim o notta):
ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }Ayrıca HTML'de kendi numaralarınızı da belirtebilirsiniz - örneğin, numaralar bir veritabanı tarafından sağlanıyorsa:
ol {
list-style: none;
}
ol>li:before {
content: attr(seq) ". ";
}<ol>
<li seq="1">Item one</li>
<li seq="20">Item twenty</li>
<li seq="300">Item three hundred</li>
</ol>seqÖzelliği, diğer cevaplar verilen benzer bir yöntem kullanılarak, görünür hale getirilir. Ama kullanmak yerine content: counter(foo)kullanırız content: attr(seq).
value="4A"işe yaramayacağı için böyle bir şey yapamazsınız. Ek olarak, değer özniteliği öznitelikle çalışabilir type, ancak değer yine de bir sayı olmalıdır (sıralı bir küme içinde çalıştığı için).
Bunun çoğunu diğer yanıtlardan çaldım, ancak bu benim için FF3'te çalışıyor. Bu sahiptir upper-roman, üniforma girintilemeyi, yakın bir ayraç.
<!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>Ben: önce niteliği ile oynamanızı ve onunla neler başarabileceğinizi görmenizi öneririm. Bu, kodunuzun gerçekten güzel yeni tarayıcılarla sınırlı olduğu ve piyasanın (can sıkıcı derecede büyük) bölümünü hala çöp eski tarayıcıları kullanan bölümünü hariç tutacağı anlamına gelir.
Aşağıdakine benzer bir şey, eşyalar üzerinde sabitlemeyi zorlar. Evet, genişliği kendiniz seçmenin daha az zarif olduğunu biliyorum, ancak düzeniniz için CSS kullanmak gizli polis işi gibidir: nedenleriniz ne kadar iyi olursa olsun, her zaman karmaşıklaşır.
li:before {
content: counter(item) ") ";
counter-increment: item;
display: marker;
width: 2em;
}Ama kesin çözümü bulmak için denemeniz gerekecek.
Liste stili türünü şu şekilde ayarlayarak sayılara baştaki sıfırları eklerseniz sayılar daha iyi sıralanır :
ol { list-style-type: decimal-leading-zero; }valueÖzniteliği kullanın (CSS gerekmez)Modern tarayıcılar valueözelliği yorumlayacak ve beklediğiniz gibi gösterecektir. MDN belgelerine bakın .
<ol>
<li value="3">This is item three.</li>
<li value="50">This is item fifty.</li>
<li value="100">This is item one hundred.</li>
</ol>Ayrıca bir göz MDN'yi üzerinde makale , özellikle dokümantasyon ve öznitelik.<ol>start
Marcus Downing'in cevabını ödünç aldı ve geliştirdi . Firefox 3 ve Opera 9'da test edilmiş ve çalışmaktadır. Birden çok satırı da destekler.
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. */
}Orada Tip nitelik sen ancak, sayı / mektupta sonra tam durak değiştiremezsiniz, numaralandırma stilini değiştirmek için izin verir.
<ol type="a">
<li>Turn left on Maple Street</li>
<li>Turn right on Clover Court</li>
</ol>Dokümanlar ilgili diyor list-style-position: outside
BB1, işaretleme kutusunun kesin konumunu belirtmemiştir ve uyumluluk nedeniyle BB2 eşit derecede belirsiz kalmıştır. İşaret kutularının daha hassas kontrolü için lütfen işaretleyicileri kullanın.
Sayfanın ilerisinde, işaretçilerle ilgili şeyler var.
Bir örnek:
LI:before {
display: marker;
content: "(" counter(counter) ")";
counter-increment: counter;
width: 6em;
text-align: center;
}Hayır ... sadece bir DL kullanın:
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;
}Bende var. Takip etmeyi dene:
<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>İşin püf noktası, bunun daha eski veya daha az uyumlu tarayıcılarda kesinlikle çalışmayacağıdır: display: inline-blockçok yeni bir özelliktir.
Hızlı ve kirli alternatif çözüm. Önceden biçimlendirilmiş metinle birlikte bir tablo karakteri kullanabilirsiniz. İşte bir olasılık:
<style type="text/css">
ol {
list-style-position: inside;
}
li:first-letter {
white-space: pre;
}
</style>ve html'niz:
<ol>
<li> an item</li>
<li> another item</li>
...
</ol>liEtiket ile metnin başlangıcı arasındaki boşluğun bir tablo karakteri olduğunu unutmayın (not defteri içindeki sekme tuşuna bastığınızda elde ettiğiniz şey).
Daha eski tarayıcıları desteklemeniz gerekiyorsa, bunun yerine bunu yapabilirsiniz:
<style type="text/css">
ol {
list-style-position: inside;
}
</style>
<ol>
<li><pre> </pre>an item</li>
<li><pre> </pre>another item</li>
...
</ol>Burada genellikle okumaktan hoşlanmadığım türden bir cevap vereceğim, ancak sanırım size istediğinizi nasıl elde edeceğinizi söyleyen başka cevaplar olduğu için, elde etmeye çalıştığınız şey gerçekten ise yeniden düşünmek güzel olabilir. iyi bir fikir.
İlk olarak, öğeleri standart olmayan bir şekilde, sağlanandan farklı bir ayırıcı karakteriyle göstermenin iyi bir fikir olup olmadığını düşünmelisiniz.
Bunun nedenlerini bilmiyorum ama iyi nedenleriniz olduğunu varsayalım.
Burada, işaretlemenize içerik eklemekten oluşan, esas olarak CSS aracılığıyla: sahte sınıftan önce elde etmek için önerilen yollar. Bu içerik DOM yapınızı gerçekten değiştiriyor ve bu öğeleri ona ekliyor.
Standart "ol" numaralandırmasını kullandığınızda, "li" metninin seçilebilir olduğu, ancak önündeki sayının seçilemediği oluşturulmuş bir içeriğe sahip olacaksınız. Yani, standart numaralandırma sistemi gerçek içerikten daha çok "dekorasyon" gibi görünüyor. Örneğin bu ": önce" yöntemlerini kullanarak sayılar için içerik eklerseniz, bu içerik seçilebilir ve buna bağlı olarak istenmeyen kopyalama / yapıştırma sorunları veya bu "yeni" içeriği okuyacak ekran okuyucularla erişilebilirlik sorunları ortaya çıkaracaktır. standart numaralandırma sistemine.
Belki başka bir yaklaşım, resimleri kullanarak sayıları biçimlendirmek olabilir, ancak bu alternatif kendi sorunlarını da beraberinde getirecektir (resimler devre dışı bırakıldığında sayılar gösterilmez, sayı değişmeyen metin boyutu, ...).
Her neyse, bu cevabın nedeni sadece bu "imajlar" alternatifini önermek değil, sıralı listeler için standart numaralandırma sistemini değiştirmeye çalışmanın sonuçlarını insanlara düşündürmektir.
Bu kod, numaralandırma stilini li içeriğinin başlıklarıyla aynı yapar.
<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>