CSS feste Breite in einer Spanne

Question

CSS feste Breite in einer Spanne

Gefragt el 2 de November, 2008: Wann wurde die Frage gestellt
839945 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

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.

Gefragt el 2 de November, 2008 von jason saldo

Answer 1

5 Antworten

Answer 2

602voto

codeinthehole Punkte 8487

In einer idealen Welt würden Sie dies einfach mit folgendem Css erreichen

<style type="text/css">

span {
  display: inline-block;
  width: 50px;
}

</style>

Dies funktioniert mit allen Browsern außer FF2 und darunter.

Firefox 2 und niedriger unterstützen dies nicht Wert nicht. Sie können -moz-inline-box verwenden, verwenden, aber beachten Sie, dass dies nicht dasselbe ist wie inline-block ist, und es könnte nicht so funktionieren, wie wie Sie es in manchen Situationen erwarten.

Zitat entnommen aus quirksmode

Beantwortet el 3 de November, 2008 von codeinthehole (8487 Punkte )

Answer 3

449voto

Stephen Caldwell Punkte 4974

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 schon sagte, müssen Sie ein nicht umbrechendes Leerzeichen in Ihre "leeren" Spans einfügen, aber Sie können einem Inline-Element keine Breite zuweisen, sondern nur Padding-Margin, also müssen Sie es schweben lassen, damit Sie ihm eine Breite geben können.

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

Beantwortet el 2 de November, 2008 von Stephen Caldwell (4974 Punkte )

Answer 4

19voto

Tamas Czinege Punkte 114595

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

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

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

<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">&nbsp;</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>

Beantwortet el 2 de November, 2008 von Tamas Czinege (114595 Punkte )

Answer 5

16voto

Aaron Powell Punkte 24630

En <span> Tag muss gesetzt werden auf display:block da es sich um ein Inline-Element handelt und die Breite ignoriert wird.

also:

<style type="text/css"> span { width: 50px; display: block; } </style>

und dann:

<li><span>&nbsp;</span>something</li>
<li><span>AND</span>something else</li>

Beantwortet el 3 de November, 2008 von Aaron Powell (24630 Punkte )

Answer 6

12voto

schlebe Punkte 2712

Mit HTML 5.0 ist es möglich, die Breite des Textblocks mit <span> o <div> .

Para <span> Wichtig ist, dass Sie folgende CCS-Zeile hinzufügen

display: inline-block;

Für Ihr leeres <span> Es ist wichtig, dass Sie Folgendes hinzufügen   Raum.

Mein Code lautet wie folgt

body
    {
    font-family: Arial;
    font-size:20px;
    }

div
    {
    width:200px;
    font-size:80px;
    background-color: lime;
    }
div span
    {
    display:block;
    width:200px;
    background-color: lime;
    }

ul li span
    {
    display: inline-block;
    width: 80px;
    background-color: yellow;
    }
span.tab
    {
    display: inline-block;
    width: 80px;
    background-color: yellow;
    }

&lt;DIV&gt;

<div class='test'>ABCDEF</div>

&lt;SPAN&gt;

<div>
    <span class='test'>ABCDEF</span>
</div

<br>

<ul>
  <li><span class='tab'>&nbsp;</span> The lazy dog.</li>
  <li><span class='tab'>AND</span> The lazy cat.</li>
  <li><span class='tab'>OR</span> The active goldfish.</li>
</ul>

PS: Ich habe definiert tab Klasse, weil ul li span Der CSS-Selektor funktioniert auf meinem PC nicht!

Beantwortet el 1 de Kann, 2020 von schlebe (2712 Punkte )

CSS feste Breite in einer Spanne

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

CSS feste Breite in einer Spanne

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: