JQuery Mobile表单单选按钮遮挡标签位置调整求助

嘿，我来帮你搞定这个排版问题～你遇到的情况是因为没有遵循jQuery Mobile的表单控件结构规范，它会自动美化原生表单元素，但原生的<input>直接加文本的写法会让它的渲染逻辑出错，而且完全不用修改官方的CSS文件，下面给你两个可行的解决方案：

方法1：用jQuery Mobile推荐的标准结构（最稳妥） #

jQuery Mobile需要特定的HTML结构来正确渲染对齐的单选按钮和标签，你可以改成这样：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>请选择：</legend>
    <input type="radio" name="bool" id="option-yes" value="yes">
    <label for="option-yes">Yes</label>
    
    <input type="radio" name="bool" id="option-no" value="no">
    <label for="option-no">No</label>
  </fieldset>
</div>

这里的关键点是：

• 每个单选按钮都要有唯一的id，对应<label>的for属性
• 把控件放在data-role="controlgroup"的<fieldset>里，jQuery Mobile会自动处理成整齐的排版

方法2：添加自定义CSS（不想改HTML结构时用） #

如果你不想调整原有HTML结构，可以在页面里加一段自己的CSS，直接覆盖默认样式，完全不用碰官方的CSS文件：

<style>
  /* 调整单选按钮容器的布局，让按钮和标签横向对齐 */
  .ui-radio {
    display: inline-flex;
    align-items: center;
    margin-right: 20px;
  }
  /* 调整按钮和标签之间的间距 */
  .ui-radio .ui-btn {
    margin: 0 8px 0 0;
  }
</style>

这段CSS会让美化后的按钮和标签横向排列，按钮在标签左侧，间距也更合理。

为什么原来的写法会出问题？ #

jQuery Mobile会自动把原生的<input>转换成它自己的美化DOM结构，如果你只用<input>+<br>的简单写法，它生成的结构会把按钮和文本拆分开，导致按钮跑到标签前面的错位问题。遵循它的结构规范是最省心的解决方式哦～

内容的提问来源于stack exchange，提问作者Lambert Brother