Css 调整窗口大小时隐藏

我在屏幕顶部有一个导航栏

与左侧对齐的是放置在li元素内的链接

右边是一个搜索框

当窗口为全屏时，链接和搜索框都很好地与中间的空隙保持良好的关系。但当窗口调整大小且搜索框接触最右边的li元素时，搜索框将下降到下一行

我不想跳到下一行，而是想在重新调整窗口大小时使最右边的li元素消失。随着窗口的进一步调整，更多的li元素从右边消失，我希望这是有意义的

我试着用

margin: 0;
padding: 0;
overflow: hidden;

---

但它不起作用，以下是我的完整代码：

解决方案可以是使用@media:

---

另一种选择是简单地使用空白：nowrap CSS proprety告诉您样式表不要在下面的行中删除元素。在包含列表和搜索栏的元素容器上使用此属性。

我使用jQuery和@media解决了这个问题

---

你试过媒体查询吗？我没有看到搜索框和任何s@Morpheus对不起，小提琴没有保存，我更新了链接。你可以使用隐藏的xs类在手机上隐藏搜索，或者在平板电脑上隐藏sm。类似于->，但最终必须手动定义所有宽度。另一个选择是使用javascript，我在小提琴上试过，但没有成功，我只是想让最右边的li在窗口调整大小时消失。因此，如果你看我的小提琴，项目13将被隐藏，然后项目12，依此类推，随着窗口大小的调整。

@media screen and (max-width: 640px) { /* 640 for example */
    .li {
        display : none;
    }
}

$(function ()
{
    var width_before_links = $('.navbar-header').width() + $('#menu_items').width();
    var width_of_each_li = $('.recently-viewed li').width();
    var gap = 15;
    var width_after_links = $('.navbar-right').width();
    var current_link = 1;
    var max_width_style = "<style>";

    while ( current_link <= {{ count( Session::get( 'recently_viewed' )) }} )
    {
        max_width = width_before_links + ( width_of_each_li * current_link ) + gap + width_after_links;

        max_width_style = max_width_style
        + "@media screen and (max-width: " + max_width + "px) {" +
            ".recently-viewed li:nth-child(" + current_link + ") {" +
             "display : none;" +
            "}" +
          "}";

         current_link++;
    }
    $( max_width_style + "</style>" ).appendTo( "head" );
});