CSS - Anzeige von zwei Textblöcken in derselben Zeile

Wie kann ich zwei Textblöcke auf derselben Zeile positionieren, eine auf der linken und die andere auf der rechten Seite, ohne Floats zu verwenden?CSS - Anzeige von zwei Textblöcken in derselben Zeile

So:

Bla bla     5 
Whatever     25 
Boo      12

Jede Zeile ist ein Listenelement - <LI>

Quelle

2011-01-11 Alex

Ohne Schwimmer mit? Sie können eine Tabelle verwenden :) Wenn sie alle Inline-Elemente sind, sollte das Festlegen ihrer 'display: inline;' -Eigenschaft funktionieren. –

Sie Tabellen verwenden können. Auch Sie absolute Positionierung verwenden könnten und den gleichen Wert für oben und unten

Quelle

2011-01-11 01:39:24 SuperIRis

zu jedem ul Objekt Einstellung können Sie ein funktionierendes Beispiel here

ul { 
    list-style-type:none; 
} 
li span { 
    display:inline-block; 
    width:100px; 
} 

<ul> 
    <li> 
     <span>Bla Bla</span> 
     <span>5</span> 
    </li> 
    <li> 
     <span>Whatever</span> 
     <span>25</span> 
    </li> 
</ul>

Quelle

2011-01-11 01:56:39

Sie haben Zahlen in Ihrem Beispiel sehen, die ich anzeigt, dass Sie tabellarische Daten anzeigen können. Wenn dies der Fall ist, verwenden Sie eine Tabelle. Einfach!

Wenn das nicht der Fall ist, verwenden span s mit einem Satz Breite:

.label { 
    display: inline-block; 
    width: 200px; // or whatever 
}

und:

<ul> 
    <li> 
     <span class="label">Blah blah</span> 
     5 
    </li> 
    <li> 
     <span class="label">Stuff</span> 
     25 
    </li> 
</ul>

Quelle

2011-01-11 02:27:41 keithjgrant

Inline-Block hat Probleme mit IE6/7 - http://www.quirksmode.org/css/display.html –

Ah, das stimmt. Ich glaube nicht, dass es ohne Schwimmer möglich ist. Ich habe gerade den Code meiner Site auf etwas Ähnliches überprüft, und wir sind auf 'Inline-Block' angewiesen und nur zu etwas anderem für IE6/7 degradiert. – keithjgrant

@zurahn - "IE 6/7 akzeptiert den Wert nur für Elemente mit einer natürlichen Anzeige: inline" ... span ist ein Inline-Element, und daher funktioniert das Setzen von Inline-Blöcken gut in IE –

Ich weiß, das eine alte, aber es wäre wie die meisten semantisch scheinen Die korrekte Option wäre, DL, DT und DT anstelle von LI zu verwenden.

<dl> 
<dt>Bla bla</dt><dd>5</dd> 
<dt>Whatever</dt></dd>25</dd> 
<dt>Boo</dt><dl>12</dl> 
</dl>

Dann würden Sie es wie diese Art:

dl { 
    margin: 0; 
} 

dt { 
    clear: left; 
    float: left; 
    padding: 0 0 2px; 
    font-weight: bold; 
} 

dd { 
    float: left; 
    margin-left: 10px; 
    padding: 0 0 2px; 
}

Ich weiß, dass Sie keinen Schwimmer festgelegt, aber das ist der Weg, um den Job zu erledigen.

Quelle

2012-02-10 00:52:25

Hier ist ein sehr einfacher Trick, den ich verwendet habe. Es tut float s, aber ich denke, es sieht immer noch ziemlich nett:

HTML:

<h1 class="title1">Chicken Craft</h1> 
<h1 class="title2">Minecraft Server</h1>

CSS:

.title1 { 
    text-align: left; 
    color: #269CEB; 
    margin-top: 0px; 
    float: left; 
    clear: both; 
} 

.title2 { 
    text-align: left; 
    color: #FF9D00; 
}

Quelle

2013-05-29 00:37:39 Vance

CSS - Anzeige von zwei Textblöcken in derselben Zeile

Antwort

Verwandte Themen