0

我正在尝试为我要组合的应用程序制作一个简单的个人资料页面。

它有 4 个问题，最后一个是Gender。

其他三个问题与“字段容器文本输入”配合得很好，但我想对性别问题使用单选按钮。

当我尝试将Male/Female按钮与Gender标题对齐时，它们总是太靠近而不与标题对齐。

我想要实现的是让按钮与Gender其他三个部分内联并保持相同的距离。

这是我到目前为止所拥有的：

<div data-role="content">
    <div data-role="fieldcontain">
       <label for="height" style="font-size:25px"><strong>Height</strong></label>
       <input style="display: inline-block;  width: 5%" type="text" name="name" id="height" value="" />
       <p style="display: inline-block; margin-left:5px; margin-right:10px"> feet   </p>
       <input style="display: inline-block;  width: 5%" type="text" name="name" id="height" value="" />
       <p style="display: inline-block; margin-left:5px; margin-right:10px"> inches OR   </p>
       <input style="display: inline-block;  width: 5%" type="text" name="name" id="height" value="" />
       <p style="display: inline-block; margin-left:5px"> cm</p>
    </div>
    <div data-role="fieldcontain">
       <label for="height" style="font-size:25px"><strong>Height</strong></label>
       <input style="display: inline-block;  width: 5%" type="text" name="name" id="height" value="" />
       <p style="display: inline-block; margin-left:5px; margin-right:10px"> pounds OR   </p>
       <input style="display: inline-block;  width: 5%" type="text" name="name" id="height" value="" />
       <p style="display: inline-block; margin-left:5px"> kg</p>
    </div>
    <div data-role="fieldcontain">
       <label for="age" style="font-size:25px"><strong>Age</strong></label>
       <input style="width: 5%" type="text" name="name" id="age" value="" />
    </div>
    <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
       <div style="display:inline !important;">
          <label style="font-size:25px"><strong>Gender</strong></label>
       </div>
       <div style="display:inline-block !important; float:right !important;">
          <input type="radio" name="radio-choice" id="male" value="choice-1" />
          <label for="male">Male</label>
          <input type="radio" name="radio-choice" id="female" value="choice-2" />
          <label for="female">Female</label>
       </div>
    </fieldset>
</div>
4

1 回答 1

0

将 Gender 字段组的标记更改为以下内容：

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
        <legend><strong style="font-size:25px">Gender</strong></legend>
        <input type="radio" name="radio-choice" id="male" value="choice-1" checked="checked" />
        <label for="male">Male</label>
        <input type="radio" name="radio-choice" id="female" value="choice-2" />
        <label for="female">Female</label>
    </fieldset>
</div>
于 2013-01-11T03:47:20.237 回答