单选按钮没有完全对齐

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的下边距。调整它们以确定它是否有任何区别。

Answer 2

没有看到css我无法肯定地说，但看起来你在该单选按钮上设置了默认边距。尝试重置它：

input {
    padding: 0;
    margin: 0;
}

Answer 3

JqueryMobile会自动为其创建的构造添加边距。我猜测字段集标签或单选按钮本身在转换时有额外的边距。尝试将高度属性添加到父div，看看是否有效。

此外，当您使用data-role =“fieldcontain”时，如果您有一个窄视口，则会显示该行。如果视口较宽，则会自动消失。这是JqueryMobile的组织方式。它通常用于将标签及其控件组合在一起，因此您可以通过不在该特定控件行中使用一个来获得更好的结果。