Problème de flottement CSS simple

J'ai un problème simple avec une image qui passe sous le texte, plutôt qu'à côté.Problème de flottement CSS simple

Markup est comme ceci:

<div class="footer"> 
    <p>bla bla bla bla</p> 
    <a href="url_here" class="next" title="Next"><span>Next</span></a> 
</div>

CSS est comme ceci:

div.footer p { 
    color: #FFF; 
    width: 80%; 
    margin: 0 auto; 
    padding:0; 
    border: 1px solid white; 
} 
div.footer a.next { 
    background-repeat:no-repeat; 
    display: block; 
    float: left; 
    margin-left: 2em; 
    height: 52px; 
    width: 24px; 
    background-image: url('../gfx/arrow-right.jpg'); 
    margin-left: .7em; 
} 
div.footer a.next span { 
    display: none; 
}

Le paragraphe semble vouloir pousser le lien ci-dessous, plutôt que de flotter dans l'espace libre à côté. Des idées? Le <p> est seulement 80% de large, donc il a beaucoup d'espace pour afficher le lien.

Vive

Source

2010-06-01 Cory Dee

Je suis venu ici à la recherche d'un simple problème d'arithmétique en virgule flottante, alors j'ai clarifié votre titre. ;) –

Bravo, merci pour la clarification. –

Le paragraphe est un élément de niveau bloc et va se forcer à être sur une nouvelle ligne après le dernier élément et forcer l'élément suivant d'être sur une nouvelle ligne. Si vous voulez que le lien sur la gauche (vous avez un flottant: à gauche sur l'ancre) essayez de faire flotter le paragraphe vers la droite.

essayer

div.footer p{ 
    ... 
    float:right; 
}

voir http://jsfiddle.net/2PXt6/1/

si vous voulez l'ancre à flotter à droite du paragraphe, déplacer l'ancre à être avant le paragraphe et mettre un flotteur: droit sur l'étiquette anchore .

EDIT: Pour avoir l'ancre sur le droit a l'ancre d'abord dans le code html et float: right voir http://jsfiddle.net/2PXt6/4/

si vous ne voulez pas changer le code html, flotter le paragraphe à gauche et la ancre à gauche. voir http://jsfiddle.net/2PXt6/5/

Source

2010-06-01 13:29:09

Ce que vous décrivez ressemble au comportement approprié pour une balise "p". Voir here. Si vous ne voulez pas le lien ci-dessous, pourquoi n'utilisez-vous pas un "div" au lieu d'un "p" tag? Vous devriez être en mesure de transférer tous les styles à la nouvelle div.

Mise à jour: Je pense que le HTML ci-dessous ferait ce que vous dites. J'ai fait les styles en ligne pour plus de simplicité, vous voudrez les déplacer dans votre fichier css.

<div class="footer"> 
    <div style="float:left">bla bla bla bla</div> 
    <a href="url_here" style="float:right" class="next" title="Next">Next</a> 
</div>

Source

2010-06-01 13:32:55

Cela semble être la chose la plus proche de ce que je veux, cependant, cela reste avec le lien de liaison. L'intention est de flotter à gauche de son espace disponible, étant le bord droit du div/paragraphe. –

En fait, je fais ceci:

div.footer p { 
    float: left; 
    ... 
}

Source

2010-06-01 13:33:07 Kurucu

p est un élément de niveau bloc, donc à moins que vous flottez, les choses après ce sera en dessous.

Vous pouvez faire flotter le paragraphe ou placer le lien avant celui-ci dans le code HTML.

Source

2010-06-01 13:33:25 jeroen

Problème de flottement CSS simple

Répondre

Questions connexes