Question

截至目前，我已经设法使搜索栏在所有分辨率下都可以更改宽度，但是一旦屏幕尺寸变小并且需要将搜索栏的宽度降低到200px以下，就不会了，这意味着我的搜索栏在下面而不是内联。

1280x800 并将宽度设置为300px

1024x768 ，并将宽度设置为150px（不起作用）

作为参考，网站是Redec，并且我正在尝试确保搜索栏在大多数分辨率下都适合导航栏。请随意检查页面，因为我无法列出原始html。以下是与搜索栏相关的CSS。

您还可以使用Screenfly通过轻松更改分辨率来准确地复制问题。

提前谢谢！

/*NAVBAR SEARCHBAR*/
#product-search-0{
    min-width: 350px;
    padding-top:17px;
    padding-left: 15px;
}

/*navbar searchbar at 1400px*/
@media (max-width: 1400px){
    #product-search-0{
        min-width: 400px;
        padding-top: 17px;
        padding-left: 5px;
    }

    /*navbar searchbar at 1320px*/
    @media (max-width: 1320px){
        #product-search-0{
            min-width: 350px;
            padding-top: 17px;
            padding-left: 5px;
        }
    }

    /*navbar searchbar at 1255px*/
    @media (max-width: 1255px){
        #product-search-0{
            min-width: 300px;
            padding-top: 17px;
            padding-left: 5px;
        }
    }

    /*navbar searchbar at 1200px*/
    @media (max-width: 1200px){
        #product-search-0{
            min-width: 250px;
        }
    }

    /*navbar searchbar at 1100px*/
    @media (max-width: 1100px){
        #product-search-0{
            min-width: 200px;
        }
    }

    /*navbar searchbar at 1085px*/
    @media (max-width: 1085px){
        #product-search-0{
            min-width: 150px;
        }
    }
}

Answer 1

使用此CSS

.x-nav-wrap.desktop {
    display: block;
    width: calc(100% - 225px);
    float: left;
}

Answer 2

在CSS的第1722行使用此

@media (max-width: 1085px)
#product-search-0 {
    width: 110px !important;
    min-width: 100%;
}

这不会中断。

Answer 3

.x-nav-wrap.desktop {
display: block;
max-width: 150px;
float: left;}

使用最大宽度，它将不允许搜索栏从上述最大宽度大小开始增长。

我的搜索栏宽度不会低于200像素

3 个答案: