Question

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

左侧对齐的是放置在li元素内的链接
右边是一个搜索框

当窗口全屏时，链接和搜索框都很好地位于中间的间隙。但是当调整窗口大小并且搜索框触及最右边的li元素时，搜索框将下降到下一行。

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

我尝试使用

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

但它不起作用，这是我的完整代码：https://jsfiddle.net/preetz86/utyhf9hj/

Answer 1

解决方案可能是使用@media：

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

另一种选择可能是简单地使用white-space : nowrap CSS proprety告诉你样式表不要在下面放置元素。在包含列表和搜索栏的元素的容器上使用此proprety。

Answer 2

我使用jQuery和@media

解决了这个问题

$(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" );
});

调整窗口大小时隐藏<li> </li>

2 个答案: