Html 使菜单（li）内的输入字段响应

我有一个导航菜单，最后一项包含一个搜索输入字段。我想输入字段是有响应的，这样我就可以调整窗口大小，避免菜单行中断，不惜任何代价。 我不想使用媒体查询，因为菜单最终将位于wordpress主题中，因此项目将是动态的（不同数量的项目和不同长度的单词）。当然，在某些阶段，如果项目太多，菜单将中断，但我仍然希望找到一个解决方案，为输入搜索字段设置最小/最大宽度

我甚至不确定这是否可能。如果没有，是否有其他解决方案

我希望输入字段具有响应性，这样我就可以调整窗口的大小，避免菜单行中断，不惜任何代价

您可以删除

浮动

并在

元素上使用

显示：表格单元格

和

空白：nowrap

，如下所示：

菜单{
颜色：#FFF；
宽度：100%；
背景：#000；
}
.menu>ul{
显示：表格；
宽度：100%；
填充：5px0；
保证金：0；
}
.menu>ul>li{
列表样式：内部无；
右边框：1px实心#FFF；
填充：0 5px；
显示：表格单元格；
空白：nowrap；
}
.menu>ul>li:最后一个孩子{
溢出：隐藏；
边界权：无；
文本对齐：右对齐；
}
输入{
宽度：100%；
最大宽度：400px；
}

链接1
链接2
链接3
链接4
链接5
链接6
链接7
链接8
链接9
链接10

是的。看看吧，要把所有这些都放在一行小屏幕上是不可能的，因为小屏幕看起来很糟糕，用户体验也很差。用这样的东西作为替代。如果您不需要所有引导代码@Quentin Roy，媒体查询不是解决方案，您也可以使用自定义程序，因为菜单需要保持动态，这取决于菜单项的数量和菜单词的长度。当然，在某个阶段，如果时间太长，它会破裂，但我希望找到一个简单的解决方案。谢谢。这看起来很棒，除了一部分。我想保持搜索栏向右浮动。将

float:right

添加到最后一项似乎会再次创建换行符。我可以编辑html。也许将表单包装在div中。我会尝试一下。好的，请参阅更新的答案。您可以在

上使用
显示：表格
，在最后一个
上使用
文本对齐：右
。代码段太窄，看不见，但输入将占用所有剩余空间，直到它达到您的最大宽度400px，然后它将保持在右侧。您链接的小提琴工作正常。非常感谢你。
<div class="menu">
    <ul>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
        <li>Link 4</li>
        <li>Link 5</li>
        <li>Link 6</li>
        <li>Link 7</li>
        <li>Link 8</li>
        <li>Link 9</li>
        <li>Link 10</li>
        <li>
            <form method="get" class="search-form2" action="/" >
                <input type="search"placeholder="Search" />
            </form>
        </li>
    </ul>
</div>

.menu {
    color:#FFF;
    width:100%;
    background:#000;
}

.menu > ul {
    display: inline-block;
    width:100%;
    padding:5px 0;
    margin:0;
}
.menu > ul > li {
    list-style:inside none;
    float:left;
    border-right:1px solid #FFF;
    padding: 0 5px;
}

.menu > ul > li:last-child{
    float:right;
    overflow:hidden;
    border-right:none;
}
input {
    width: 100%;
    max-width: 400px;
}