如何使用 jQuery Mobile 制作按钮的内联位置？

在 jQuery Mobile 中，我们可以使用 data-inline="true" 属性来制作内联按钮。这些按钮将随着页面宽度的变化而水平排列。

下面是一个简单的例子：

<div data-role="content">
  <a href="#" data-role="button" data-inline="true">按钮 1</a>
  <a href="#" data-role="button" data-inline="true">按钮 2</a>
  <a href="#" data-role="button" data-inline="true">按钮 3</a>
</div>

您可以将 data-role="button" 和 data-inline="true" 属性添加到任何链接或按钮标记中，以使其成为 jQuery Mobile 样式的按钮。在上面的示例中，我们创建了三个内联按钮并将它们放在一个 data-role="content" 元素中。

如果您需要创建一个垂直按钮堆栈，而不是水平按钮堆栈，请使用 CSS 样式来实现它。下面是一个示例：

<style>
  .vertical-buttons a {
    display: block;
    margin: 5px;
  }
</style>

<div data-role="content" class="vertical-buttons">
  <a href="#" data-role="button">垂直按钮 1</a>
  <a href="#" data-role="button">垂直按钮 2</a>
  <a href="#" data-role="button">垂直按钮 3</a>
</div>

在这个示例中，我们创建了一个 CSS 类来修改内联按钮的默认行为。 .vertical-buttons a 类使用 display: block 属性将按钮变成块级元素，并使用 margin: 5px 属性添加间距。最后，我们将 class="vertical-buttons" 添加到 data-role="content" 元素中，以应用这个 CSS 类。

通过这些简单的步骤，您可以使用 jQuery Mobile 制作漂亮的按钮并将它们放在适当的位置。