Заголовок и кнопка для отображения CSS в той же строке

Question

Я видел еще несколько тем по этой проблеме, но ни один из них, похоже, не решил мою проблему. У меня есть текст заголовка и кнопка, и я хочу отобразить их в одной строке.

HTML:

<div> 
    <h3 class="header">Title</h3> 
    <button type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check header">Button</button> 
</div> 

CSS:

.header { 
    display: inline-block; 
    float: left; 
} 

Теперь я использую в основном один и тот же код, позже в моей странице, кроме как с <img>'s и он работает прекрасно. Я думал, что с тех пор, как я использую jQuery Mobile, может быть, стиль у него переоценивается, но даже если я удалю классы ui, результат будет таким же. Аналогично, если я попытаюсь установить статическую ширину как для заголовка, так и для кнопки, я получаю тот же результат. Любая помощь будет оценена!

jsfiddle: http://jsfiddle.net/p9jf60yc/

Answer 1

Добавить класс ui-btn-inline на свою кнопку. Это часть классов jquery mobile css. Не нужно настраивать пользовательский css.

<div> 
    <h3 class="header">Title</h3> 
    <button type="submit" class="ui-btn ui-btn-inline ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check header">Button</button> 
</div> 

JSfiddle Demo

PS: обзор всех доступных классов можно найти here

Answer 2

Вы должны установить ширину кнопки, поэтому оно не имеет 100%:

button.header{ 
    width:100px; 
} 

http://jsfiddle.net/p9jf60yc/2/

Answer 3

Изменение ширины по кнопке авто ,

button.ui-btn { 
    width: auto; 
}