html - 单选按钮未完全对齐

Question

谁能告诉我为什么单选按钮会出现您在图片中看到的这种奇怪行为？

它没有正确对齐。为什么会有那条线？我没有应用任何 css 样式。

这是html代码:

<div class = "ui-grid-a">
                    <div class = "ui-block-a">  
                        <div data-role="fieldcontain" class="ui-hide-label">
                            <label for"date">Birth Date</label>
                            <input type="datetime" name="dt" id="dt" value="" placeholder="Birth Date" style="width: 50%"/>
                        </div>
                    </div>

                    <div class = "ui-block-b">
                        <div data-role="fieldcontain">
                            <fieldset data-role="controlgroup" data-type="horizontal">
                                <input type="radio" name="male" id="male" value="male" />
                                <label for="male">M</label>

                                <input type="radio" name="female" id="female" value="female" />
                                <label for="female">F</label>
                            </fieldset>
                        </div>
                    </div>
                </div>

Answer 1

似乎控制单选按钮周围的 fieldset 的 CSS 是罪魁祸首。我从 default jQuery Mobile CSS 中提取了以下内容.

.ui-controlgroup, fieldset.ui-controlgroup { padding: 0; margin: .5em 0 1em; }

上边距为 .5em，下边距为 1em。调整这些以查看它是否有任何不同。