CSS float right неправильно работает

Мой правый float не работает, как я ожидаю.

Я хочу, чтобы моя кнопка была хорошо выровнена справа от моего текста над строкой:

<div style="padding: 5px; border-bottom-width: 1px; border-bottom-color: gray; border-bottom-style: solid;">

    My Text

<button type="button" class="edit_button" style="float: right; margin:5px;">My Button</button>

</div>

Однако он всегда кажется нависшим над линией.

Если я увеличиваю отступ или край DIV, то кнопка справа все же, кажется, проталкивается по линии внизу.

Я попытался поиграть с paddings и полями кнопки справа, но я не могу заставить его быть размещенным аккуратно рядом с текстом.

Fiddle здесь:

http://jsfiddle.net/qvsy7/

Большое спасибо

Ответ 1

вам нужно обернуть текст внутри div и поместить его влево, в то время как div div должен иметь высоту, а I'v также добавил высоту строки для вертикального выравнивания

<div style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: gray;height:30px;">
   <div style="float:left;line-height:30px;">Contact Details</div>

    <button type="button" class="edit_button" style="float: right;">My Button</button>

</div>

также js скрипка здесь =) http://jsfiddle.net/xQgSm/

Ответ 2

Вот один из способов сделать это.

Если HTML выглядит так:

<div>Contact Details
    <button type="button" class="edit_button">My Button</button>
</div>

примените следующий CSS:

div {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: gray;
    overflow: auto;
}
.edit_button {
    float: right;
    margin: 0 10px 10px 0; /* for demo only */
}

Трюк заключается в применении overflow: auto к div, который запускает новый контекст форматирования блока. В результате плавающая кнопка заключена в область блока, определенную тегом div.

Затем вы можете добавить поля к кнопке, если это необходимо, чтобы настроить стиль.

В исходном HTML и CSS плавающая кнопка была вне потока содержимого, поэтому граница div будет располагаться относительно текста в потоке, который не включает в себя какие-либо плавающие элементы.

См. демонстрацию по адресу: http://jsfiddle.net/audetwebdesign/AGavv/

Ответ 3

LIke this

окончательный ответ

CSS

h2 {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    margin: 0;
    padding: 0;
}
.edit_button {
    float: right;
}

demo1

CSS

h2 {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: gray;
    float: left;
    margin: 0;
    padding: 0;
}
.edit_button {
    float: right;
}

HTML

<h2>
Contact Details</h2>
<button type="button" class="edit_button" >My Button</button>

демонстрация

HTML

<div style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: gray; float:left;">
Contact Details



</div>
<button type="button" class="edit_button" style="float: right;">My Button</button>

Ответ 4

Verry Easy, порядок изменения элемента:

Происхождение

<div style="">

    My Text

    <button type="button" style="float: right; margin:5px;">
       My Button
    </button>

</div>

Изменить на:

<div style=""> 

    <button type="button" style="float: right; margin:5px;">
       My Button
     </button>

   My Text

</div>

Ответ 5

Вы не использовали команду float:left для вашего текста.