Question

经过大量的CSS修补，我设法让我的表单元素正确排列。不幸的是，我不能为我的生活弄清楚如何修复标签/图像被定位错误。我希望它们在选择框旁边排成一行，但是它们在它的顶部对齐，到目前为止我没有尝试过任何工作。

enter image description here

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

更新

更改它以使用表格时，它显示如下...

enter image description here

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

Answer 1

我建议您使用4列表格。

Answer 2

Here is a image when i'm using your html, is that right?

也许你有另一个与田地风格相交的css

场集元素的垂直对齐

2 个答案: