html - 尝试将搜索表单对齐到 <li> 的右侧

标签 html css alignment searchbar

我正在尝试将我的搜索栏与 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;
}

有什么办法可以做到这一点吗?

最佳答案

display:inline-block 将为您工作。

ul#nav li {
  display:inline-block
}

你可以找到Demo在这里。

关于html - 尝试将搜索表单对齐到 <li> 的右侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26112787/

相关文章:

javascript - fabricjs 中的图案填充使渲染变慢

html - Css div 选择器多个类

html - 使 <img> 标签延伸到 css 中的 <body> 标签之外

css - 在按钮中心添加加载器/旋转器

javascript - 单击图像时如何将图像更改为另一个图像

html - 如何在 div 元素内水平居中图像?

javascript - 如何让我的选项卡 100% 位于顶部?

完美对齐的 HTML 段落

javascript - 控制 HTML5 中显示的 PDF 字体

javascript - 使用圆圈背景图像在 div 中居中大文本