Drei Worte auf den Platz einer Zeiler verteilt.

[d.pitee]

Hallo.
also ich beschrebe mal mein problem.
ich wuerde gerne auf meienr website drei worte in eine zeile bekommen. ich will aber auch das diese drei worte sich gleichmaessig auf den platz verteilen.
also in etwa so dass es einmal eins links gibt eins in der mitte und eins rechts.

nehmen wir als beispiel 1 2 und 3
also 1 soll links sein 2 in der mitte und 3 dann rechts.
jedoch soll zwischen ihnen gleich viel abstand sein.
ich suche jedoch auch einen code der es erlaubt das die
drei worte in einer zeile sind.
also alles muesste in einer zeile sein.

ich hoffe ihr versteht was ich meine und koennt mir helfen.

 

[threadi]

Reicht Blocksatz vielleicht schon aus?

text-align: justify;

Ansonsten um jedes Wort ein Blockelement legen und alle 3 per float und mit jeweils 33% Breite nebeneinander positionieren.

 

[d.pitee]

Ansonsten um jedes Wort ein Blockelement legen und alle 3 per float und mit jeweils 33% Breite nebeneinander positionieren.

danke erstmal..
jedoch weiss ich auch nciht wie das mit dem blockelement funktioniert.
koenntest du mir das ausfuerhluich erklaeren.
waere echt nett.
danke

 

[localhorst]

Ungefähr so:

<div style="float:left;width:33%;">1</div>
<div style="float:left;width:33%;">2</div>
<div style="float:left;width:33%;">3</div>
<br style="height:1%;clear:both;"/>

Das float lässt die DIV Elemente nebeneinander im Dokumentenfluss fließen-/aneinanderreihen, das clear beendet das Umfließen der gefloateten Elemente.

float: Elemente umfließen lassen: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
clear: Umfließen von Elementen beenden: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

 

[neuroleptika]

Die justify Lösung kann nicht funktionieren. Wenn der text kein Umbruch erfordert, ist kein Blocksatz zu sehen.

In der float/div -Lösung fehlt die Zentrierung.

Als Liste:
html

<ul class="center_li">
<li>Hund</li>
<li>katze</li>
<li>Maus</li>
</ul>

css (table-cell)

* {
margin: 0;
padding: 0;
  }


.center_li {
display: table;
width: 100%;
list-style: none;
  }


.center_li li {
display: table-cell;
text-align: center;
  }



/*Internet Explorer bis einschl. Vers 7*/

* html .center_li li {
display: inline;
zoom: 1;
width: 33.2%;
text-align: center;
  }

* +html .center_li li  {
display: inline;
zoom: 1;
width: 33.2%;
text-align: center;
}

Möglich wäre auch eine html-Tabelle oder <p><span></span><span></span><span></span><p>.
Was am sinnigsten ist, hängt vom Inhalt ab.

 

[localhorst]

@neuroleptika

Man muss den Usern doch nicht alles vorgekauft hinwerfen, ein bisschen Eigeninitiative sollte man schon noch verlangen ;)

 

[neuroleptika]

Ich muß nicht vorkauen.
Aber ich darf es.
Ich tat das, weil mich das css interessierte und nicht weil ich den Pädagogen raushängen lassen wollte.

Für Eigeninitiative ist da noch genug Spielraum.
Oder hast du auf Anhieb jede Zeile verstanden?

 

[localhorst]

Ich muß nicht vorkauen.
Aber ich darf es.
Ich tat das, weil mich das css interessierte und nicht weil ich den Pädagogen raushängen lassen wollte.

Jedem das seine

 

[neuroleptika]

Eben (Mindestlänge)