简体   繁体   中英

Vertical Alignment for Fieldset Elements

After an incredible amount of tinkering with CSS, I have managed to get my form elements to line up correctly. Unfortunately I cannot for the life of me figure out how to fix the labels/images from being positioned wrong. I want them to line up centered next to the select boxes, but they align at the top of it and nothing I have tried thus far has worked.

在此处输入图片说明

                <fieldset style="width:62%; float:left; margin-left: 19%;">

                        <label style="width: float: left;">Type</label>
                        <select style="width:40%; float: left;">
                            <option>Motherboard</option>
                            <option>Memory</option>
                            <option>Processor</option>
                        </select>

                        <label style="width:auto; float: left;">Item</label>
                        <select style="width:40%; float: left;">
                            <option>Motherboard</option>
                            <option>Memory</option>
                            <option>Processor</option>
                        </select>

                        <a href="#"><img src="images/icn_trash.png" style="width:auto; float: left;"></a>
                        <a href="#"><img src="images/icn_new_article.png" style="width:auto; float: left;"></a>

                </fieldset><div class="clear"></div>

Update

When changing it to use a Table instead, it appears as the following...

在此处输入图片说明

                    <div id="inv1" class="inventory" style="margin:0; padding:0;">
                        <fieldset style="width:62%; float:left; margin-left: 19%;">

                        <table style="width:100%">
                        <tr>

                            <td style="width:5%;"><label style="width:auto;">Type:</label></td>
                            <td><select style="width:100%;">
                                <option>Motherboard</option>
                                <option>Memory</option>
                                <option>Processor</option>
                            </select></td>

                            <td style="width:5%;"><label style="width:auto;">Item:</label></td>
                            <td><select style="width:100%;">
                                <option>Motherboard</option>
                                <option>Memory</option>
                                <option>Processor</option>
                            </select></td>

                            <td><a href="#"><img src="images/icn_trash.png" style="width:auto;"></a></td>
                            <td><a href="#" class="btnAddInventory"><img src="images/icn_new_article.png" style="width:auto;"></a></td>

                        </tr>
                        </table>

                        </fieldset><div class="clear"></div>
                    </div>

我建议您使用具有4列的表格。

这是我使用您的html时的图像,对吗?

maybe you have another css which intersects with fields styles

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM