Простая проблема CSS с плавающей точкой

Question

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

Разметка такая:

<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/

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

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

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

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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