CSS 在同一行显示 header 和按钮

Question

我已经看到了一些关于这个问题的其他线程，但 none 似乎解决了我的问题。我有一个 header 文本和一个按钮，我想将它们显示在同一行中。

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 类结果也是一样的。同样，如果我尝试为 header 和按钮设置静态宽度，我会得到相同的结果。如有任何帮助，我们将不胜感激！

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

Answer 1

您需要为按钮设置宽度，因此它没有 100%：

button.header{
    width:100px;
}

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

Answer 2

将按钮的宽度更改为自动。

button.ui-btn {
  width: auto;
}

Answer 3

将 ui-btn-inline class 添加到您的按钮。它是 jquery 移动 css classes 的一部分。无需调整自定义 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：可以找到所有可用 classes 的概述 here

CSS 在同一行显示 header 和按钮

CSS display header and button in same line

css

jquery

jquery-mobile