Larghezza fissa CSS in uno span

All'interno di una lista non ordinata:

<li><span></span> The lazy dog.</li>
<li><span>AND</span> The lazy cat.</li>
<li><span>OR</span> The active goldfish.</li>

L'aggiunta di una classe o di un attributo di stile è permessa, ma non è permesso riempire il testo e aggiungere o cambiare i tag.

La pagina è resa con Courier New.

L'obiettivo è di avere il testo dopo lo span allineato.

    The lazy dog.
AND The lazy cat.
OR  The active goldfish.

La giustificazione dell' "OR" non è importante.

Il testo dell'animale pigro potrebbe essere avvolto in un elemento aggiuntivo, ma devo ricontrollare.

Shaeldon
Domanda modificata 19º marzo 2015 в 11:27
Programmazione
html css
2º novembre 2008 в 10:36
15 visualizzazioni
Soluzione
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>

Come ha detto Eoin, hai bisogno di mettere uno spazio non interrotto nelle tue "campate vuote", ma non puoi'assegnare una larghezza ad un elemento in linea, solo padding/margine quindi avrai bisogno di renderlo float in modo da potergli dare una larghezza.

Per un esempio jsfiddle, vedi http://jsfiddle.net/laurensrietveld/JZ2Lg/

PythonDev
Risposta modificata 4º gennaio 2017 в 7:36
Commentari (9)

Sfortunatamente gli elementi in linea (o gli elementi che hanno display:inline) ignorano la proprietà width. Dovresti invece usare i div fluttuanti:


div.f1 { float: left; width: 20px; }
div.f2 { float: left; }
div.f3 { clear: both; }


<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>

Ora vedo che hai bisogno di usare span e liste, quindi dobbiamo riscrivere un po' questo:



        span.f1 { display: block; float: left; clear: left; width: 60px; }
    li { list-style-type: none; }



<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>
Tamas Czinege
Risposta modificata 2º novembre 2008 в 11:09
Commentari (2)

Puoi farlo usando una tabella, ma non è CSS puro.


ul{
    text-indent: 40px;
}

li{
    list-style-type: none;
    padding: 0;
}

span{
    color: #ff0000;
    position: relative;
    left: -40px;
}


<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>

Nota che non viene visualizzato esattamente come vuoi tu, perché cambia linea ad ogni opzione. Tuttavia, spero che questo ti aiuti ad avvicinarti alla risposta.

Commentari (0)