CSS feste Breite in einer Spanne

381

Innerhalb einer ungeordneten 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 zulässig, das Auffüllen des Texts und das Hinzufügen oder Ändern von Tags ist jedoch nicht zulässig.

Die Seite wird mit Courier New gerendert.

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

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

Die Begründung des "ODER" ist unwichtig.

Der faule Tiertext kann in ein zusätzliches Element eingeschlossen werden, aber ich muss es noch einmal überprüfen.

html css

— Jason Saldo
quelle

427

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>

Erweitern Sie das Snippet

Wie Eoin sagte, müssen Sie in Ihre "leeren" Bereiche einen nicht unterbrechenden Bereich einfügen, aber Sie können einem Inline-Element keine Breite zuweisen, sondern nur Auffüllen / Rand, sodass Sie es schweben lassen müssen, damit Sie können gib ihm eine Breite.

Ein Beispiel für jsfiddle finden Sie unter http://jsfiddle.net/laurensrietveld/JZ2Lg/.

— Stephen Caldwell
quelle

1

ist standardmäßig ein Inline-Element - und wenn Sie es schweben lassen, erhalten Sie keine Breite.

— Codeinthehole

56

Die Eigenschaft float generiert eine "Blockbox" mit einer Breite.

— Stephen Caldwell

83

Sollte es sein, diplay: inline-block; width: 32px;wird in den meisten modernen Browsern reichen.

— Paulo Bueno

2

@Randy Marsh - Nein, die width-Eigenschaft hat nur einen Effekt, da die float-Eigenschaft das Element in eine Blockanzeige ändert, wie Stephen Caldwell oben beschreibt.

— Codeinthehole

14

@PauloBueno können Sie ändern, um diplayzu lesendisplay , übrigens, es funktioniert für mich. danke

— basarat

507

In einer idealen Welt würden Sie dies einfach mit dem folgenden CSS erreichen

<style type="text/css">

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

</style>

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

Firefox 2 und niedriger unterstützen diesen Wert nicht. Sie können -moz-inline-box verwenden, beachten Sie jedoch, dass es nicht mit Inline-Block identisch ist und in einigen Situationen möglicherweise nicht wie erwartet funktioniert.

Zitat aus dem Quirksmode

— Code im Loch
quelle

1

@NicholasPickering .. wie wäre es mit wkhtmltopdf?

— Codeinthehole

Hm, nicht sicher. Es ist nur ein kleiner Rückschlag. Es endete damit, Tabellen verwenden zu müssen, um den gewünschten Effekt zu erzielen.

— Nicholas Pickering

Nun, ich kann wkhtmltopdf empfehlen, wenn Sie jemals etwas benötigen, das CSS3-kompatibel ist.

— Codeinthehole

7

In der Zwischenzeit, 10 Jahre später, ist dies definitiv der richtige Weg.

— Vog

19

Leider ignorieren Inline-Elemente (oder Elemente mit Anzeige: Inline) die Eigenschaft width. Sie sollten stattdessen schwebende 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 Bereiche 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>

— Tamas Czinege
quelle

3

Das ist eine großartige Lösung. Floating Divs ahmen das beabsichtigte Verhalten von Spannen nach, wenn sie horizontal ausgerichtet sind. Es ist wichtig, sich an das Klare zu erinnern: beide Zeilenumbrüche. Dies ist eine gute Möglichkeit, Tabellen in diesem Zusammenhang zu vermeiden.

— Artur

Ich verstehe nicht, die Schaltfläche ist ein Inline- oder Inline-Block-Element. Warum wird "width" darauf angewendet? Button scheint ein Inline-Element zu sein, oder? Gibt es ein Dokument, das die Standardeigenschaften "Anzeige" aller HTML-Elemente anzeigt?

— GMsoF

14

Das Tag muss auf gesetzt seindisplay:block als Inline-Element festgelegt werden und ignoriert die Breite.

damit:

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

— Aaron Powell
quelle

Nein, ich denke nicht, dass das funktioniert. "etwas" geht in die nächste Zeile. Und es fehlt ein "<"

— user1537366

Wie gesagt, es funktioniert NICHT! Überprüfen Sie jsfiddle.net/m156a0qp aus. Es ist auch nie gut, sich in das CSS aller Span-Elemente einzumischen!

— user1537366

4

<style type="text/css">

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

</style>

Mit dieser Methode können Sie die Breite für Inline-Elemente zuweisen

— Augustus Francis
quelle

2

Personen können in diesem Fall kein Blockelement sein, da der Rest des Textes zwischen 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 der Breite des gesamten ul-Elements oder eines anderen Containers entsprechen muss.

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 in der 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 das li-Element relativ ist, formatieren Sie das span-Element so, dass es absolut und oben ist: 0; left: 0; Es bleibt also oben links und Sie legen die Auffüllung links (oder: Auffüllung: 0px 0px 0px 80px;) fest, um diesen freien Speicherplatz für das span-Element festzulegen.

In einfachen Fällen sollte es besser funktionieren.

— Arturro
quelle

1

Versuche dies

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

— Rahmad Saleh
quelle

1

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

Für ist es wichtig, folgende CCS-Zeile hinzuzufügen

display: inline-block;

Für Ihre Leeren ist es wichtig, Platz hinzuzufügen  .

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

Erweitern Sie das Snippet

PS: Ich habe eine tabKlasse definiert , weil der ul li spanCSS-Selektor auf meinem PC nicht funktioniert!

— schlebe
quelle

Einfügen eines & nbsp; hat bei mir funktioniert!

— adrien le coarer

0

Sie können dies mithilfe einer Tabelle tun, es handelt sich jedoch nicht um 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 es nicht genau so angezeigt wird, wie Sie es möchten, da bei jeder Option die Leitung umgeschaltet wird. Ich hoffe jedoch, dass dies Ihnen hilft, der Antwort näher zu kommen.

— luiscubal
quelle

-1

Nun, es gibt immer die Brute-Force-Methode:

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

Oder haben Sie das mit "Auffüllen" des Textes gemeint? Das ist in diesem Zusammenhang eine mehrdeutige Arbeit.

Das klingt nach einer Hausaufgabenfrage. Ich hoffe, Sie versuchen nicht, uns dazu zu bringen, Ihre Hausaufgaben für Sie zu machen?

— eaolson
quelle

-1

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>

Erweitern Sie das Snippet

— Pepe Unodostres
quelle