Question

我正在尝试将搜索栏对齐到li菜单项的右侧。

HTML：

<body>
    <div id="navbox">
        <nav id="nav">
            <ul id="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">History</a></li>
                <li><a href="#">Leaders</a></li>
                <li><a href="#">Youth</a></li>
                <li><a href="#">Links</a></li>
                <li><a href="#">Contact</a></li>
                <li>
                    <form method="get" action="/search" id="search">
                        <input name="q" type="text" size="40" placeholder="Search..." />
                    </form>
                </li>
            </ul>
        </nav>
    </div>
</body>

CSS：

form {
padding-left: 15px;
margin: 0;
}

有没有办法实现这个目标？

Answer 1

是的，你可以简单地将这一行添加到你的CSS中：

nav, ul, li {display:inline-block}

它会起作用。但评论：一定不要两次使用相同的ID。并尝试尽可能使用类（几乎总是）

以防万一，请参阅this fiddle，以便您可以玩，尝试添加填充，边距，等等，并看看它是如何反应的

Answer 2

display:inline-block将为您效劳。

ul#nav li {
  display:inline-block
}

您可以在此处找到Demo。

尝试将搜索表单与<li> </li>的右侧对齐

2 个答案: