CSS: Madde işareti ile <li>

Bir merminin <li>bir <ol>veya içinde sağa ne kadar yatay alan ittiğini kontrol etmek istiyorum <ul>.

Yani, her zaman sahip olmak yerine

*  Some list text goes
   here.

Bunu değiştirebilmek istiyorum

*         Some list text goes
          here.

veya

*Some list text goes
 here.

Etrafa baktım, ancak tüm bloğu sola veya sağa kaydırmaya ilişkin talimatları bulabilirdim, örneğin, http://www.alistapart.com/articles/taminglists/

İçeriğini spangöreceli olarak konumlandırılmış bir yere koyun , o zaman alanı leftözelliği ile kontrol edebilirsiniz span.

li span {
  position: relative;
  left: -10px;
}

<ul>
  <li><span>item 1</span></li>
  <li><span>item 2</span></li>
  <li><span>item 3</span></li>
</ul>

Burada diğer yanıtları özetlemek gerekirse - <li>madde işaretleri ve bir liste öğesindeki metin arasındaki boşluk üzerinde daha iyi kontrol istiyorsanız seçenekleriniz şunlardır:

(1) Arka plan resmi kullanın:

<style type="text/css">
li {
    list-style-type:none;
    background-image:url(bullet.png);
}
</style>

<ul>
    <li>Some text</li>
</ul>

Avantajları:

• Madde işareti için istediğiniz herhangi bir resmi kullanabilirsiniz
• CSS'yi background-positionkullanarak görüntüyü metne göre hemen hemen istediğiniz yere, piksel, ems veya% kullanarak konumlandırmak için kullanabilirsiniz.

Dezavantajları:

• Sayfanıza fazladan (küçük de olsa) bir resim dosyası ekleyerek sayfa ağırlığını artırır
• Bir kullanıcı tarayıcısında metin boyutunu artırırsa, madde işareti orijinal boyutunda kalacaktır. Ayrıca, metin boyutu arttıkça konumdan daha da uzaklaşacaktır.
• Yalnızca genişlik yüzdeleri kullanarak 'duyarlı' bir düzen geliştiriyorsanız, madde işaretini bir dizi ekran genişliği üzerinde tam olarak istediğiniz yere götürmek zor olabilir

2. <li>Etikette dolgu kullanın

<style type="text/css">
ul {padding-left:1em}
li {padding-left:1em}
</style>

<ul>
    <li>Some text</li>
</ul>

Avantajları:

• Görüntü yok = indirilecek 1 dosya daha az
• Üzerindeki dolguyu ayarlayarak, madde işareti ile metin arasına istediğiniz <li>kadar fazla yatay boşluk ekleyebilirsiniz.
• Kullanıcı metin boyutunu büyütürse, boşluk ve madde işareti boyutu orantılı olarak ölçeklenmelidir

Dezavantajları:

• Madde işareti, tarayıcı varsayılanından metne daha yakın olamaz
• CSS'nin yerleşik madde işareti türlerinin şekilleri ve boyutları ile sınırlıdır
• Madde işareti metinle aynı renkte olmalıdır
• Merminin dikey konumlandırması üzerinde kontrol yok

(3) Metni fazladan bir <span>öğeye sarın

<style type="text/css">
li {
    padding-left:1em;
    color:#f00; /* red bullet */
}
li span {
    display:block;
    margin-left:-0.5em;
    color:#000; /* black text */
}
</style>

<ul>
    <li><span>Some text</span></li>
</ul>

Avantajları:

• Görüntü yok = indirilecek 1 dosya daha az
• Sen seçeneği ile daha merminin pozisyonu üzerinde daha fazla kontrol elde (2) - benim en iyi çabalarına rağmen bunu ekleyerek dikey konumunu değiştiremezsiniz görünse de (metne yakın taşıyabilirsiniz padding-topiçin<span> başkası olabilir. bunun için bir çözüm olsa da ...)
• Madde işareti metinden farklı bir renk olabilir
• Kullanıcı metin boyutunu büyütürse, madde işareti orantılı olarak ölçeklendirilmelidir (ems'de dolgu ve kenar boşluğunu px değil olarak ayarlamanız gerekir)

Dezavantajları:

• Ekstra bir unsemantic eleman gerektirir (bu muhtemelen SO'da gerçek hayatta olduğundan daha fazla arkadaşınızı kaybedecektir;) ancak kodlarını mümkün olduğunca yalın ve verimli olmak isteyenler için can sıkıcıdır ve sunum ile içeriğin ayrılmasını ihlal eder. HTML / CSS'nin sunması gerekiyor)
• Merminin boyutu ve şekli üzerinde kontrol yok

İşte CSS4'teki bazı yeni liste tarzı özellikleri umuyoruz, böylece resimlere başvurmadan veya exta işaretlemeden daha akıllı mermiler oluşturabiliriz :)

Bunu yapmalı. Mermilerinizi dışarıya ayarladığınızdan emin olun. IE7'de aşağı doğru bırakabiliyorsanız, CSS sözde öğelerini de kullanabilirsiniz. Bu tür şey için sözde öğeler kullanmanızı gerçekten tavsiye etmiyorum ama mesafeyi kontrol etmek için çalışıyor.

ul {
  list-style: circle outside;
  width: 100px;
}

li {
  padding-left: 40px;
}

.pseudo,
.pseudo ul {
  list-style: none;
}

.pseudo li {
  position: relative;
}

/* use ISO 10646 for content http://la.remifa.so/unicode/named-entities.html */
.pseudo li:before {
  content: '\2192';
  position: absolute;
  left: 0;
}

<ul>
  <li>Any Browser really</li>
  <li>List item
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </li>
</ul>

<ul class="pseudo">
  <li>IE8+ only</li>
  <li>List item
    <ul>
      <li>List item with two lines of text for the example.</li>
      <li>List item</li>
    </ul>
  </li>
</ul>

Eski soru, ama: önce sözde eleman burada iyi çalışıyor.

<style>
    li:before {
        content: "";
        display: inline-block;
        height: 1rem;  // or px or em or whatever
        width: .5rem;  // or whatever space you want
    }
</style>

Gerçekten iyi çalışıyor ve çok fazla kural veya html gerektirmiyor.

<ul>
    <li>Some content</li>
    <li>Some other content</li>
</ul>

Şerefe!

İçin list-style-type: inline :

DSMann8'in yanıtıyla neredeyse aynı, ancak daha az css kodu.

Sadece ihtiyacın var

<style>
    li:before {
        content: "";
        padding-left: 10px;
    }
</style>

<ul>
    <li>Some content</li>
</ul>

Şerefe

Sen kullanabilirsiniz padding-leftliste öğeleri özellik ( değil listedeki kendisinde!).

Li'de metin girintisini kullanmak en iyi sonucu verir.

metin girintisi: -x px; mermiyi li'ye ve tam tersine hareket ettirecektir.

Span üzerinde span kullanıldığında, IE için eski sürümlerde negatif sol düzgün çalışmayabilir. Not: olabildiğince çok pozisyon vermekten kaçının.

İşte css sayacı ve sözde öğeleri kullanan başka bir çözüm. Ekstra html biçimlendirme veya css sınıfları gerektirmediği için daha zarif buluyorum:

ol,
ul {
    list-style-position: inside;
}

li {
    list-style-type: none;
}

ol {
    counter-reset: ol; //reset the counter for every new ol
}

ul li:before {
        content: '\2022 \00a0 \00a0 \00a0'; //bullet unicode followed by 3 non breakable spaces
}

ol li:before {
        counter-increment: ol;
        content: counter(ol) '.\00a0 \00a0 \00a0'; //css counter followed by a dot and 3 non breakable spaces
}

Aralıklı liste öğelerimin yalnızca ilk satırını etkileyecek şekilde (liste öğesi birden fazla satır uzunluğundaysa) kırılmaz boşluklar kullanıyorum. Bunun yerine burada dolgu kullanabilirsiniz.

Eski soru ama yine de alakalı. Negatif kullanmanızı tavsiye ederim text-indent. list-style-positionolmalıdıroutside .

Artıları:

• Mermi otomatik olarak düzgün bir şekilde yerleştirilmiş
• Yazı tipi boyutunu değiştirmek madde işareti konumunu bozmaz
• Ek öğe yok (no :: sözde öğe de)
• CSS'de değişiklik yapmadan hem RTL hem de LTR için çalışır.

Eksileri:

• Deneyin
• için
• bulmak
• bir :)

Sırasız bir liste ul etiketi ile başlar. Her bir liste öğesi, Liste öğeleri varsayılan olarak madde işaretleri (küçük siyah daireler) ile işaretlenir:

    <!DOCTYPE html>
    <html>
       <body>
          <h2>Normal List </h2>
          <ul>
             <li>Coffee</li>
             <li>Tea</li>
             <li>Milk</li>
          </ul>
       </body>
    </html>

Çıktı:

<!DOCTYPE html>
<html>
<body>

<h2>Normal List </h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

Text-indent özelliği, bir metin bloğundaki ilk satırın girintisini belirtir.
Not: Negatif değerlere izin verilir. Değer negatifse ilk satır sola girintili olacaktır.

<ul style='text-indent: -7px;'>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Görünüşe göre (bir şekilde) <li> etiketindeki dolguyu kullanarak aralığı kontrol edebilirsiniz.

<style type="text/css">
    li { padding-left: 10px; }
</style>

Yakalama, son örneğiniz gibi rahatça ezmenize izin vermiyor gibi görünüyor.

Bunun için liste stili türünü kapatmayı ve & bull;

<ul style="list-style-type: none;">
    <li>&bull;Some list text goes here.</li>
</ul>

Yalnızca madde işareti noktası ile metin arasındaki mesafeyi azaltmak istiyorsanız çok daha temiz bir çözüm var gibi görünüyor:

li:before {
    content: "";
    margin-left: -0.5rem;
}

Dikey ve yatay konumlandırma üzerinde tam kontrol sağlayan alternatif bir arka plan görüntüsü alternatifi de kullanabilirsiniz.

Bu sorunun cevabına bakınız

ul
{
list-style-position:inside;
} 

Tanım ve Kullanım

List-style-position özelliği, liste öğesi işaretleyicilerinin içerik akışının içinde mi yoksa dışında mı görüneceğini belirler.

Kaynak: http://www.w3schools.com/cssref/pr_list-style-position.asp

Sen kullanabilirsiniz ul li:beforeve bir arka plan görüntüsü ve atamak position: relativeve position:absolutekarşı live li:beforesırasıyla. Bu şekilde bir görüntü oluşturabilir ve görüntüyü li'ye göre istediğiniz yere konumlandırabilirsiniz.

Etiket padding-left:1em; text-indent:-1emiçin kullanın <li>.
Ardından list-style-position: insideiçin <ul>etiketi.

<ul style='list-style-position: inside;'>
  <li style='padding-left: 1em; text-indent: -1em;'>Item 1</li>
</ul>

Aşağıdaki çözüm, metni madde işaretine yaklaştırmak istediğinizde ve birden fazla metin satırınız olsa bile iyi çalışır .

margin-right metni madde işaretine yaklaştırmanızı sağlar

text-indent birden çok metin satırının doğru şekilde hizalanmasını sağlar

li:before {
  content: "";
  margin-right: -5px; /* Adjust this to move text closer to the bullet */
}

li {
  text-indent: 5px; /* Aligns second line of text */
}

<ul>
  <li> Item 1 ... </li>
  <li> Item 2 ... this item has tons and tons of text that causes a second line! Notice how even the second line is lined up with the first!</li>
  <li> Item 3 ... </li>
</ul>

<span style="display: flex;">her birinin içinde kullanın <li>.