CSS feste Breite in einer Spanne

Question

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 einer Klasse oder eines Stilattributs ist erlaubt, aber das Auffüllen des Textes und das Hinzufügen oder Ändern von Tags ist nicht erlaubt.

Die Seite wird in der Schriftart Courier New wiedergegeben.

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

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

Die Begründung des "ODER" ist unerheblich.

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

Answer 1

<style type="text/css">

span {
  position:absolute;
  width: 50px;
}

</style>

Sie können diese Methode für die Zuweisung der Breite für Inline-Elemente verwenden

Answer 2

People span kann in diesem Fall kein Blockelement sein, weil der Rest des Textes zwischen den li-Elementen nach unten geht. Auch die Verwendung von float ist eine sehr schlechte Idee, da Sie die Breite für das gesamte li-Element festlegen müssen, und diese Breite muss mit der Breite des gesamten ul-Elements oder eines anderen Containers identisch sein.

Versuchen Sie so etwas in HTML:

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

und im CSS:

li {position:relative;padding-left:80px;} // 80px or something else
li span {position:absolute;top:0;left:0;}
li strong {color:red;} // red or else

Wenn also die li Element relativ ist, formatieren Sie das span-Element so, dass es absolut ist und in der top:0;left:0; damit es oben links bleibt und Sie die padding-left (oder: padding:0px 0px 0px 80px; ), um diesen Freiraum für das Spannelement festzulegen.

Für einfache Fälle sollte es besser funktionieren.

Answer 3

Versuchen Sie dies

> <span class="input-group-addon" style="padding-left:6%;
> padding-right:6%; width:150px; overflow: auto;">

Answer 4

Sie können dazu eine Tabelle verwenden, aber es ist kein reines 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>

Beachten Sie, dass die Anzeige nicht genau so ist, wie Sie es wünschen, da die Zeile bei jeder Option gewechselt wird. Ich hoffe jedoch, dass dies Ihnen hilft, der Antwort näher zu kommen.

Answer 5

Nun, es gibt immer die Methode der rohen Gewalt:

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

Oder meinten Sie das mit dem "Auffüllen" des Textes? Das ist in diesem Zusammenhang ein zweideutiges Werk.

Das klingt wie eine Frage für die Hausaufgaben. Ich hoffe, Sie wollen nicht, dass wir Ihre Hausaufgaben für Sie erledigen?