Innenfor en uordnet liste:
<li><span></span> The lazy dog.</li>
<li><span>AND</span> The lazy cat.</li>
<li><span>OR</span> The active goldfish.</li>
Det er tillatt å legge til et klasse- eller stilattributt, men det er ikke tillatt å fylle ut teksten eller legge til eller endre tagger.
Siden gjengis med Courier New.
Målet er å ha tekst etter spenn på linje.
The lazy dog.
AND The lazy cat.
OR The active goldfish.
Begrunnelse for "ELLER" er uviktig.
Den dovne dyreteksten kan pakkes inn i et ekstra element, men jeg må dobbeltsjekke.
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>
Som Eoin sa, må du sette et ikke-brytende mellomrom i "tomme" spenn, men du kan ikke tilordne en bredde til et inline-element, bare polstring / margin, slik at du må få det til å flyte slik at du kan gi det en bredde.
Se
for et jsfiddle-eksempel.Dessverre ignorerer inline-elementer (eller elementer som har display:inline) width-egenskapen. Du bør bruke flytende divs i stedet:
<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>
Nå ser jeg at du trenger å bruke spenner og lister, så vi må skrive om dette litt:
<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>
Du kan gjøre det ved hjelp av en tabell, men det er ikke ren 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>
Merk at det ikke vises nøyaktig som du vil, fordi det bytter linje på hvert alternativ. Jeg håper imidlertid at dette hjelper deg med å komme nærmere svaret.