Problème CSS simple: texte du titre en haut à gauche, bouton en haut à droite

Question

J'ai une page où j'ai besoin d'un morceau de texte pour apparaître aligné en haut à gauche d'un élément positionné de manière absolue (un span, si c'est important), et un bouton pour apparaître aligné sur le coin supérieur droit du même élément. modifier: Problème avec ceci est encore quand j'utilise float: right; et display: inline; le bouton aime toujours à laisser tomber la ligne suivante.

Actuellement, ma solution consiste à enrouler le bouton avec un élément de travée, à faire flotter la travée vers la droite, puis à régler le bouton sur la position absolue. Le problème avec ceci est qu'il n'apparaît pas à moins que manuellement spécifie la largeur de l'étendue de l'enveloppe pour s'adapter à la taille du navigateur. Ce qui est un peu bête.

Quelle est la bonne façon de faire cela?

modifier 2: Voici était mon code d'origine:

#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; 
} 

Et le code HTML:

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

Answer 1

J'espère avoir bien compris.

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

Où clearfix est le célèbre (http://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/). De cette façon, je ne pense pas que vous devez définir explicitement la largeur du texte ou du bouton.

Answer 2

Je crois la bonne 'façon à utiliser DIVs (non SPAN) pour élément positionnement. Mais oui, vous devez définir la largeur explicitement sur la DIV flottante sur la gauche, sinon elle prendra toute la ligne (étant un élément de bloc et tout). Assurez-vous juste que votre largeur est suffisante pour afficher tout le contenu de la DIV sans déborder.