contenu Faire à droite le plus dans une balise div

Question

J'ai quelques fragments de code HTML

<div id="title">This is title<span id="close">X<span><div> 

La largeur de cette div est dynamique, peut-être 300 600 ou 800 px. Je veux le "X" à droite le plus de la div sur la même ligne. Donc, écrivez un CSS comme ci-dessous:

#close 
{ 
    margin-right:10px; 
} 

Mais cela ne fonctionne pas. Si je veux l'implémenter, que dois-je configurer?

Cordialement,

Answer 1

Utiliser le positionnement absolu.

#title {position: relative; width: 300px} 
#close {position: absolute; top: 5px; right: 5px} /* adjust based on required margin */ 

Mais gardez à l'esprit que le contenu est placé de façon absolue à l'extérieur du modèle de boîte et peut chevaucher le contenu dans le title div. Vous devez définir un remplissage/marge approprié pour éviter cela.

Answer 2

Essayez ceci:

<div id="title">This is title<div><span id="close">X<span></div><div> 

et le style:

#title div { 
    text-align: right; 
    float: right; 
    clear: none; 
} 

Ou vous pouvez vous débarrasser de la portée entièrement et il suffit d'utiliser la div, en font peut-être 20px de large et le style avec une couleur différente de sorte qu'il ressemblerait plus à un bouton. Moi, j'utiliserais un graphique dans un img pour le bouton de fermeture, mais à chacun le sien.

arrangement Autre:

<div id="title"><div style="width:20px"><span id="close">X<span></div>This is title<div> 

Answer 3

Il y a quelques mauvaises choses avec le code HTML dans votre question:

• La propriété CSS "marge droite" vous donne 10px de l'espace à droite de votre élément, hors de la frontière. , Vous voulez plutôt être en utilisant float: right (et un div au lieu d'une travée, puisque flottante des œuvres avec des éléments de bloc uniquement)

• Vos mots-clés ne sont pas fermées (utiliser <div></div> au lieu de <div><div>)

Pour ce que vous recherchez, procédez comme suit:

<div id="title"> 
    This is title <div id="close">X</div>  
</div> 

Avec le CSS suivant

#close 
{ 
float:right; 
} 

Answer 4

<div id="title"><div class="float-right"><span id="close">X</span></div>This is title</div> 

et la classe

.float-right{ 
float:right; 
}