Sıralanmamış bir liste içinde:
<li><span></span> The lazy dog.</li>
<li><span>AND</span> The lazy cat.</li>
<li><span>OR</span> The active goldfish.</li>
Bir sınıf veya stil niteliği eklemeye izin verilir ancak metni doldurmaya ve etiket eklemeye veya değiştirmeye izin verilmez.
Sayfa Courier New ile oluşturuluyor.
Amaç, açıklıktan sonra metnin sıralanmasıdır.
The lazy dog.
AND The lazy cat.
OR The active goldfish.
"OR" gerekçelendirmesi önemsizdir.
Tembel hayvan metni ek bir öğeye sarılmış olabilir, ancak iki kez kontrol etmem gerekecek.
ul {
list-style-type: none;
padding-left: 0px;
}
ul li span {
float: left;
width: 40px;
}
<ul>
<li><span></span> The lazy dog.</li>
<li><span>AND</span> The lazy cat.</li>
<li><span>OR</span> The active goldfish.</li>
</ul>
Eoin'in söylediği gibi, "empty" boşluklarınıza kırılmayan bir boşluk koymanız gerekir, ancak satır içi bir öğeye genişlik atayamazsınız, yalnızca dolgu / kenar boşluğu atayabilirsiniz, bu nedenle bir genişlik verebilmeniz için onu yüzdürmeniz gerekir.
Bir jsfiddle örneği için bkz.
Ne yazık ki satır içi öğeler (veya display:inline olan öğeler) width özelliğini yok sayar. Bunun yerine kayan divler kullanmalısınız:
<style type="text/css">
div.f1 { float: left; width: 20px; }
div.f2 { float: left; }
div.f3 { clear: both; }
</style>
<div class="f1"></div><div class="f2">The Lazy dog</div><div class="f3"></div>
<div class="f1">AND</div><div class="f2">The Lazy cat</div><div class="f3"></div>
<div class="f1">OR</div><div class="f2">The active goldfish</div><div class="f3"></div>
Şimdi span ve liste kullanmanız gerektiğini görüyorum, bu yüzden bunu biraz yeniden yazmamız gerekiyor:
<html><head>
<style type="text/css">
span.f1 { display: block; float: left; clear: left; width: 60px; }
li { list-style-type: none; }
</style>
</head><body>
<ul>
<li><span class="f1"> </span>The lazy dog.</li>
<li><span class="f1">AND</span> The lazy cat.</li>
<li><span class="f1">OR</span> The active goldfish.</li>
</ul>
</body>
</html>
Bunu bir tablo kullanarak yapabilirsiniz, ancak bu saf CSS değildir.
<style>
ul{
text-indent: 40px;
}
li{
list-style-type: none;
padding: 0;
}
span{
color: #ff0000;
position: relative;
left: -40px;
}
</style>
<ul>
<span></span><li>The lazy dog.</li>
<span>AND</span><li>The lazy cat.</li>
<span>OR</span><li>The active goldfish.</li>
</ul>
Her seçenekte satır değiştirdiği için tam olarak istediğiniz gibi görüntülenmediğine dikkat edin. Ancak, umarım bu cevaba yaklaşmanıza yardımcı olur.