带有文本输入字段的jquery移动对齐选项框

Question

我一直试图获得一个选项框，以水平对齐文本输入字段。我已经把它放在一个网格中，试图使它工作，但它不会正确地对齐。这是我的代码：

<form id="frmNewReservation">
                <div class="ui-grid-c">
                    <div class='ui-block-a' >
                        <div class='ui-body ui-body-a' style='border:0px;'> 
                            <div class="ui-field-contain">
                                <fieldset data-role="controlgroup" data-type="horizontal">
                                    <div style="margin-top: 6px;">

                                    <select name="sortBy" id="sortBy"  data-mini="true" >
                                        <option value="#">All</option>
                                        <option value="#">Physical Size</option>
                                        <option value="#">Sizecode</option>
                                    </select>
                                    </div>
                                </fieldset>
                            </div>


                            </div>
                        </div>
                        <div class='ui-block-b'>
                            <div class='ui-body ui-body-a' style='border:0px;'>
                                <input type="text" name="textinput-5" id="textinput-5" placeholder="Text input" value="" data-mini="true">          
                            </div>
                        </div>  
                        <div class='ui-block-c'>
                            <div class='ui-body ui-body-a' style='border:0px;'>
                                <input type="text" name="textinput-5" id="textinput-5" placeholder="Text input" value="" data-mini="true">          
                            </div>
                        </div>  
                        <div class='ui-block-d'>
                            <div class='ui-body ui-body-a' style='border:0px;'>
                                <input type="text" name="textinput-5" id="textinput-5" placeholder="Text input" value="" data-mini="true">          
                            </div>
                        </div>  
                </div><!-- close grid -->

            </form> 

JS小提琴：http://jsfiddle.net/FGW2L/

我有什么办法解决这个问题吗？谢谢

Answer 1

您需要对这些元素调整以下样式。

div.ui-body { height: 41px; }
div.ui-field-contain { margin: 0px; }

*这将更容易使用样式表来管理，而不是对所有东西都使用内联样式(也减少了重复)。