Einfaches CSS-Problem: Titeltext oben links, Button oben rechts

Question

Ich habe eine Seite, auf der ein Text erscheinen soll, der links von einem absolut positionierten Element ausgerichtet ist (ein Bereich, wenn es darauf ankommt), und eine Schaltfläche, die am oberen rechten Rand des gleichen Elements ausgerichtet ist. edit: Problem mit diesem ist auch wenn ich float: right; und display: inline; die Taste immer noch gerne die nächste Zeile löschen.

Momentan besteht meine Lösung darin, die Schaltfläche mit einem Span-Element zu umbrechen, die Spanne nach rechts zu verschieben und dann die Schaltfläche auf absolute Position zu setzen. Das Problem ist, dass es nicht erscheint, wenn ich manuell die Breite des Wrapper-Bereichs angeben, um zu passen, egal wie groß der Browser die Schaltfläche rendert. Was ist irgendwie dumm.

Was ist der richtige Weg, dies zu tun?

bearbeitet 2: Hier war mein ursprünglicher Code:

#header 
{ 
    position: absolute; 
    top: 0; 
    bottom: auto; 
    left: 0; 
    width: 100%; 
    height: 24px; 
    overflow: hidden; 
} 


/* Header's buttons. */ 
#header > span 
{ 
    float: right; 
    width: 100px; 
} 
#header > span > button 
{ 
    position: absolute; 
} 

Und die HTML:

<span id="header"> 
    Trigger editor 
    <span><button type="button" id="h_output">Output Triggers</button></span> 
</span> 

Answer 1

Ich hoffe, ich habe es richtig verstanden.

<div class="clearfix"> 
    <div style="float:left">Text</div> 
    <div style="float:right">Button</div> 
</div> 

Wo clearfix die teste ist (http://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/). Auf diese Weise denke ich nicht, dass Sie explizit die Breite des Textes oder der Schaltfläche festlegen müssen.

Answer 2

Ich glaube, 'die richtige' Art und Weise es DIVs zu verwenden (nicht Span) für Element Positionierung. Aber, ja, Sie müssten die Breite explizit auf dem floated DIV auf der linken Seite setzen, sonst wird es die gesamte Linie (ein Blockelement und alle). Stellen Sie nur sicher, dass Ihre Breite ausreicht, um den gesamten Inhalt des DIV anzuzeigen, ohne zu überlaufen.