Simple CSS Float Problem

Question

У меня есть простая проблема с изображением, идущим под текстом, а не рядом с ним.

Markup как это:

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

CSS, как это:

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

В этом пункте, кажется, хочет, чтобы нажать на ссылку ниже него, а не парит в свободном пространстве рядом с ним. Есть идеи? <p> имеет ширину всего 80%, поэтому у него много места для отображения ссылки.

Приветствия

Answer 1

Этот пункт является элементом уровня блока и заставит себя быть на новой строке после последнего элемента и заставить следующий элемент, чтобы быть на новой строке.

Если вы хотите, чтобы ссылка слева (у вас есть поплавок: слева на якоре), попробуйте поместить абзац вправо.

попробовать

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

см http://jsfiddle.net/2PXt6/1/

, если вы хотите, чтобы якорь, чтобы плавать справа от пункта, переместить якорь, чтобы быть перед абзацем и поставить поплавок: право на anchore теге ,

EDIT: Чтобы иметь якорь на праве иметь якорь первым в HTML и плавать: право видеть http://jsfiddle.net/2PXt6/4/

, если вы не хотите, чтобы изменить HTML, всплывают абзац влево и якорь слева. см. http://jsfiddle.net/2PXt6/5/

Answer 2

То, что вы описываете, звучит как правильное поведение для тега «p». См. here. Если вам не нужна ссылка ниже, почему бы вам не использовать «div» вместо тега «p»? Вы должны перенести все стили на новый div.

Обновление: Я думаю, что HTML ниже сделает то, что вы говорите. Я сделал стили inline для простоты, вы захотите перенести их в свой файл 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> 

Answer 3

На самом деле, я хотел бы сделать это:

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

Answer 4

p является элемент уровня блока, так что если вы не всплывут его, то после этого будет под ним.

Вы можете либо поплавать абзацем, либо поместить ссылку перед ним в html.