如何在"li"内将一个"form"元素与另一个"li"对齐？

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

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

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

Answer 2

像下面这样更改代码

<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;属性/值对。