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

Question

截至目前，我已经设法让搜索栏在所有分辨率下更改宽度，但是一旦我使用较小的屏幕尺寸并需要搜索栏宽度低于 200 像素，它就不会了，这意味着我的搜索栏在下面而不是内联。

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;
}