带搜索栏的html导航栏

我已经在各种网站上寻找答案，包括这一个，但没有找到答案。我试图在我设置的导航栏中添加一个用户输入文本框，它填充了剩余的空间，没有空间放置搜索按钮，并将其强制放到下一行

#导航{
背景色：#222；
位置：固定；
宽度：100%；
顶部：0px；
}
#导航包装器{
宽度：90%；
保证金：0px自动；
文本对齐：左对齐；
}
#导航ul{
列表样式类型：无；
填充：0px；
边际：0px；
}
#李国荣{
显示：内联块；
}
#nav ul li:悬停{
背景色：#333；
}
#nav ul li a，
拜访{
显示：块；
填充：15px；
颜色：#CCC；
文字装饰：无；
}

您不能明确指定文本框的宽度吗

#search-bar {
    width: 10em;
}

---

您需要做的是将输入id设置为列表项，这样就完成了。

当我把它放在JSFIDLE中时，它都在一行上。我不得不增加屏幕大小，但你介意发布一个指向实时版本或JSFIDLE的链接，其中包含的代码比发布的代码多。我刚刚编辑了代码片段，使其在堆栈溢出中可以运行，并且看到了与@floor相同的东西。也许你在你的页面上有一些多余的CSS，这是你在问题中遗漏的，这使得它占据了全部空间？无法添加其余的代码，而且它与问题没有关联，它只控制一个弹出框全部修复，正如@redbmk所说，样式表底部有一些css代码实际上影响了宽度设置为60%的搜索栏，这使得搜索按钮进入下一行。正如@floor所提到的，根据屏幕大小，您将遇到问题。在较小的屏幕上，您将看到按钮、栏和/或一些导航链接延伸到下一行。您可能希望使用不同的屏幕大小，并使用媒体查询或其他方式使其看起来更美观。Chrome有很好的开发工具来模拟移动设备或只是改变屏幕大小。只是尝试了一下，它对工具栏没有任何影响，当涉及到css时，我也是一个真正的noob，即使这确实有效。。。它可能最终会因屏幕大小而中断。