CODEWITHSUNDEEP
jquerycssjquery-mobile
Ryan Sayles
Ryan Sayles

Reputation: 3431

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/

Upvotes: 2

Views: 5189

Answers (3)

james walsh
james walsh

Reputation: 19

Change the width on the button to auto.

button.ui-btn {
  width: auto;
}

Upvotes: 0

kasper Taeymans
kasper Taeymans

Reputation: 7026

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

Upvotes: 1

mezod
mezod

Reputation: 2391

You need to set a width to the button, so it doesn't have the 100%:

button.header {
  width: 100px;
}

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

Upvotes: 1

Related Questions