Sarakstā bez kārtas:
<li><span></span> The lazy dog.</li>
<li><span>AND</span> The lazy cat.</li>
<li><span>OR</span> The active goldfish.</li>
Ir atļauts pievienot klases vai stila atribūtu, bet nav atļauts aizpildīt tekstu un pievienot vai mainīt tagus.
Lapa tiek atveidota ar Courier New.
Mērķis ir panākt, lai teksts pēc span būtu izkārtots.
The lazy dog.
AND The lazy cat.
OR The active goldfish.
"VAI" pamatojums nav svarīgs.
Iespējams, ka slinko dzīvnieku teksts ir ietīts papildu elementā, bet man tas jāpārbauda vēlreiz.
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>
Kā teica Eoin, jums ir jāieliek tukšs atstarpes laukums, bet jūs nevarat piešķirt platumu ievilktajam elementam, tikai padding/margin, tāpēc jums būs nepieciešams, lai tas peldētu, lai varētu tam piešķirt platumu.
jsfiddle piemēru skatiet
.Diemžēl rindas elementi (vai elementi ar display:inline) ignorē platuma īpašību. Tā vietā jums vajadzētu izmantot peldošos divs:
<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>
Tagad es redzu, ka jums ir jāizmanto spans un saraksti, tāpēc mums tas ir nedaudz jāpārraksta:
<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>
To var izdarīt, izmantojot tabulu, taču tas nav tīrs 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>
Ievērojiet, ka tas netiek attēlots tieši tā, kā vēlaties, jo tas pārslēdz rindas katrai opcijai. Tomēr es ceru, ka tas palīdzēs jums tuvoties atbildei.