Question

我正在尝试为我正在尝试整理的应用创建一个简单的个人资料页面。

它有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>

Answer 1

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

<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>

如何垂直居中对齐和标题和单选按钮

1 个答案: