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

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

button.header{
    width:100px;
}

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

Answer 2

将ui-btn-inline课程添加到您的按钮。它是jquery移动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 3

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

button.ui-btn {
  width: auto;
}

CSS显示标题和同一行中的按钮

3 个答案: