html figcaption CSS feste Breite in einem Bereich



css position (6)

Das <span> -Tag muss so eingestellt sein, dass es Folgendes display:block da es ein Inline-Element ist und die Breite ignoriert.

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>

https://ffff65535.com

In 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, dass Text nach Spanne aufgereiht ist.

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

Die Begründung des "OR" ist unwichtig.

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


In einer idealen Welt erreichen Sie dies einfach mit den folgenden CSS

<style type="text/css">

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

</style>

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

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

Zitat aus quirksmode


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 meinen Sie das, indem Sie den Text "auffüllen"? Das ist eine zweideutige Arbeit in diesem Zusammenhang.

Das hört sich nach einer Hausaufgabenfrage an. Ich hoffe, du versuchst nicht, uns dazu zu bringen, deine Hausaufgaben für dich zu machen?


People Span kann in diesem Fall kein Blockelement sein, da der Rest des Textes zwischen den einzelnen Elementen untergehen wird. Auch Float zu verwenden ist eine sehr schlechte Idee, da Sie die Breite für das gesamte li-Element festlegen müssen und diese Breite muss der Breite des gesamten ul-Elements oder anderen Containers entsprechen.

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 als absolut und oben: 0, links: 0; also bleibt es oben links und Sie legen die Padding-Links (oder: Padding: 0px 0px 0px 80px;), um diesen freien Platz für span-Element festzulegen.

Es sollte besser für einfache Fälle funktionieren.


Versuche dies

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

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 gesagt hat, musst du ein "non-breaking" Leerzeichen in deine "leeren" Spannen setzen, aber du kannst einem Inline-Element keine Breite zuweisen, nur Padding / Rand, also musst du es floaten lassen, damit du es kannst Gib ihm eine Breite.

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





css