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

*使用样式表更容易管理，而不是内联样式（更少重复）

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

1 个答案: