Question

我已创建JSFiddle来说明我的错误。

我只想对齐“ul”

中的所有“li”元素

<div id="easySearchMenu">
    <ul>
        <li>Categories
            <ul>
                <li>Classifieds</li>
                <li>Business listings</li>
                <li>Propetries</li>
            </ul>
        </li>
        <li>Advanced Search</li>
        <li>
            <form id="searchForm">
                <fieldset>
                    <div class="input">
                        <input type="text" name="s" id="s" value="Enter your search" />
                    </div>
                    <input type="submit" id="searchSubmit" value="" />
                </fieldset>
            </form>
        </li>
        <li>Log in / Register</li>
    </ul>
</div>

Answer 1

更改您的代码，如下所示

<div id="easySearchMenu">
    <ul>
        <li>Categories
            <ul>
                <li>Classifieds</li>
                <li>Business listings</li>
                <li>Propetries</li>
            </ul>
        </li>
        <li>Advanced Search</li>
        <li style="padding: 8px 20px 7px 20px;">
            <form>
                <div class="input">
                    <input type="text" name="s" id="s" value="Enter your search">
                </div>
                <input type="submit" id="searchSubmit" value="">
            </form>
        </li>
        <li>Log in / Register</li>
    </ul>
</div>

最终更改您的css，从选择器div.input移除float:right;属性/值对。

Answer 2

你在内部ul中使用了块级元素，导致不必要的复杂化。

您可以将fieldset更改为display:inline-block以对齐这些框，但这对不同的高度没有帮助。

如何将“li”中的一个“form”元素与另一个“li”对齐？

2 个答案: