Search code examples
jquerycssjquery-mobile

CSS display header and button in same line

I've seen a few other threads about this issue but none seem to solve my problem. I have a header text and a button and I want to display them in the same line.

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

Now I'm using basically the same code later in my page except with <img>'s and it works perfectly fine. I thought that since I'm using jQuery Mobile maybe the styling is being overridden by that but even if I remove the ui classes the result is the same. Likewise, if I try to set a static width to both the header and the button I get the same result. Any help would be appreciated!

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

Solution

  • Add the ui-btn-inline class to your button. It's part of the jQuery mobile CSS classes. No need to tweak with custom 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: an overview of all available classes can be found here