radio button not perfectly aligned

Question

who can tell me why the radio button has this strange behaviour as you can see in the picture?

it's not aligned correctly.why there is that line? I didn't applied any css style.

here it is the html code:

<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

It appears as if the CSS controlling the fieldset surrounding your radio buttons is the culprit. I pulled the following from the default jQuery Mobile CSS .

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

There is a top margin of .5em and a bottom margin of 1em . Adjust those to see if it makes any difference at all.

Answer 2

Without seeing the css I can't say for sure, but it looks like you have a default margin set on that radio button. Try resetting it with this:

input {
    padding: 0;
    margin: 0;
}

Answer 3

JqueryMobile automatically adds margins to the constructs it creates. I'm guessing the fieldset tags or the radio buttons themselves have additional margins from the conversion. Try adding a height property to the parent div and see if that works.

Also, the line appears when you have a narrow viewport when you use the data-role="fieldcontain". If the viewport is wider, it automatically disappears. It's JqueryMobile's way of organizing stuff around. It's usually used to group a label and its control together, so you might get a better result by not using one in that particular row of controls.