CSS feste Breite in einer Spanne

Innerhalb einer unsortierten Liste:

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

Das Hinzufügen eines Klassen- oder Stilattributs ist erlaubt, aber das Auffüllen des Textes und das Hinzufügen oder Ändern von Tags ist nicht erlaubt.

Die Seite wird mit Courier New gerendert.

Ziel ist es, den Text nach der Spanne aufgereiht zu haben.

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

Die Rechtfertigung des "OR" ist unwichtig.

Der Text für das faule Tier kann in ein zusätzliches Element eingeschlossen werden, aber ich muss das noch einmal überprüfen.

Shaeldon
Bearbeitete Frage 19. März 2015 в 11:27
Programmierung
html css
2. November 2008 в 10:36
15 Aufrufe
Lösung
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>

Wie Eoin sagte, müssen Sie ein nicht umbrechendes Leerzeichen in Ihre "empty" spans, aber Sie können nicht zuweisen eine Breite zu einem Inline-Element, nur padding/margin so you' ll müssen es float, so dass Sie es eine Breite geben können.

Für ein jsfiddle-Beispiel siehe http://jsfiddle.net/laurensrietveld/JZ2Lg/

PythonDev
Bearbeitete Antwort 4. Januar 2017 в 7:36
Kommentare (9)

Leider ignorieren Inline-Elemente (oder Elemente mit display:inline) die Eigenschaft width. Sie sollten stattdessen fließende Divs verwenden:


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>

Jetzt sehe ich, dass Sie Spans und Listen verwenden müssen, also müssen wir dies ein wenig umschreiben:



        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
Bearbeitete Antwort 2. November 2008 в 11:09
Kommentare (2)

Sie können dazu eine Tabelle verwenden, aber es ist kein reines CSS.


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>

Beachten Sie, dass es nicht genau so angezeigt wird, wie Sie es wünschen, da die Zeile bei jeder Option gewechselt wird. Ich hoffe jedoch, dass Sie damit der Antwort näher kommen.

Kommentare (0)