Neorganizuotame sąraše:
<li><span></span> The lazy dog.</li>
<li><span>AND</span> The lazy cat.</li>
<li><span>OR</span> The active goldfish.</li>
Leidžiama pridėti klasės ar stiliaus atributą, tačiau neleidžiama įterpti tekstą ir pridėti ar keisti žymas.
Puslapis atvaizduojamas naudojant Courier New.
Siekiama, kad tekstas po span būtų išrikiuotas.
The lazy dog.
AND The lazy cat.
OR The active goldfish.
"ARBA" pagrindimas nėra svarbus.
Tinginio gyvūno tekstas gali būti suvyniotas į papildomą elementą, bet turėsiu dar kartą patikrinti.
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>
Kaip sakė Eoin, jums reikia į savo "tuščią" intervalą įdėti nepertraukiamą tarpą, bet jūs negalite priskirti pločio eilutės elementui, o tik padding/margin, todėl jums reikės padaryti jį plūduriuojančiu, kad galėtumėte suteikti jam plotį.
Jsfiddle pavyzdį rasite
.Deja, į eilutės elementus (arba elementus su display:inline) neatsižvelgiama į width savybę. Vietoj jų turėtumėte naudoti plaukiojančius divus:
<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>
Dabar matau, kad jums reikia naudoti spans ir sąrašus, todėl turime tai šiek tiek perrašyti:
<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>
Galite tai padaryti naudodami lentelę, tačiau tai nėra grynasis CSS.
<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>
Atkreipkite dėmesį, kad ji nebus rodoma tiksliai taip, kaip norite, nes kiekvienai parinkčiai perjungiama eilutė. Tačiau tikiuosi, kad tai padės jums priartėti prie atsakymo.