Html Flex搜索字段赢得'；t响应最小/最大宽度_Html_Css_Flexbox_Responsive Design

Html Flex搜索字段赢得'；t响应最小/最大宽度

html css responsive-design

Html Flex搜索字段赢得'；t响应最小/最大宽度,html,css,flexbox,responsive-design,Html,Css,Flexbox,Responsive Design,我在我的谷歌主页中有一个文本输入字段。我使用flexbox来处理搜索字段行上的所有内容，我试图在调整页面大小时为搜索栏提供最小宽度和最大宽度，但我无法使其响应，它始终默认为最小或最大宽度，并且无论窗口有多窄都保持这种状态以下是我的HTML的搜索栏部分： <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <

我在我的谷歌主页中有一个文本输入字段。我使用flexbox来处理搜索字段行上的所有内容，我试图在调整页面大小时为搜索栏提供最小宽度和最大宽度，但我无法使其响应，它始终默认为最小或最大宽度，并且无论窗口有多窄都保持这种状态

以下是我的HTML的搜索栏部分：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<link href="styles/style.css" rel="stylesheet" type="text/css">

  <form id="search-wrapper" name="search-form">
    <div id="searchbar">
      <span class="material-icons-outlined">search</span>
      <input id="search-field">
      <a href="#">
        <img id="search-microphone" src="images/search_mic.png" alt="">
      </a>
    </div>
  </form>

如果有帮助的话，再多一点

我一直在寻找那些看起来像是重复的问题，但迄今为止还无法找到一个有效的解决方案。我尝试了容器和输入字段子项之间可以想到的

width

、

minwidth

和

max width

的每种组合，例如：

在容器上设置
```
max width:70rem
```
，然后在子容器上设置
```
width:100%
```
和
```
min width:40rem
```
在容器上设置
```
max width:70rem
```
，然后在子容器上设置
```
min width:40rem
```
在容器上设置
```
width:70rem
```
和
```
minwidth:40rem
```
，然后在子容器上设置
```
width:100%
```
（以及与之相反的
```
max width
```
）
在容器上设置
```
max width:70rem
```
和
```
min width:40rem
```
，然后在子容器上设置
```
width:100%
```
在容器上设置无宽度，然后在子容器上设置
```
最小宽度：40rem
```
和
```
最大宽度：70rem
```
在容器上设置无宽度，然后在子容器上设置
```
width:70rem
```
和
```
minwidth:40rem
```
（与之相反的是
```
max width
```
）
在父对象上设置
```
最小宽度：40rem
```
和
```
最大宽度：70rem
```
，然后将子对象设置为
```
flex:1
```
，将容器中的其他两个子对象设置为
```
flex:0
```
将子对象设置为
```
display:block
```
，并使用上面列出的各种组合进行游戏

无论我尝试什么，搜索字段总是以70rem或40rem的速度显示，并且根本不会增长或收缩。我通常不难使flex的东西具有响应性；有人能看到我遗漏了什么吗？

在我看来，因为您正在使用http链接将它覆盖的css与您的个人样式表连接起来。几周前我遇到了类似的问题，一个简单的解决方案解决了我的问题。因此，在您认为代码无法读取的地方（在您的例子中是宽度），只需添加 !重要的；造型之后

例如：

#搜索栏{

width: 70rem important! ;

}感谢希拉尔·阿尔萨的评论，他引导我朝着最终解决问题的方向前进

包括

搜索包装器上的宽度：100%
，搜索栏
，以及搜索字段
加上最小宽度：40rem
和最大宽度：70rem
，搜索栏
，这是它最后做的：
#search-wrapper {
    margin: 10rem auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;                    /* added this */
}
#searchbar {
    display: flex;
    align-items: center;
    width: 100%;                    /* here */
    min-width: 40rem;               /* here */
    max-width: 60rem;               /* here */
    border: .1rem solid rgba(0,0,0,.3);
    border-radius: 3rem;
    margin: 0 2rem;
    padding: .75rem 1.25rem;
    font-family: "Material Icons";
    font-size: 1.8em;
    color: rgba(0,0,0,.3);
}
#search-field {
    width: 100%;                    /* and here */
    margin: 0 1.5rem;
    border: none;
    font-family: Helvetica, sans-serif;
}

您是否尝试过使用媒体查询？媒体查询无法满足我的要求：我试图使搜索栏的宽度随着页面变宽/变窄而相应地增大和缩小，我不希望宽度在两个预先确定的选项之间跳跃。你是否尝试过将搜索栏宽度设置为100%，并将最小和最大宽度也设置在搜索栏上？你这个漂亮的人，非常感谢你。http链接实际上只针对包含放大镜图标的字体，CSS的其余部分以正常方式链接为同一目录中的文件。我将在我的帖子中更新代码来说明这一点。我刚刚看到，为什么你不使用@media querys来简化你的工作并添加更具体的断点？特别是因为重建谷歌主页是一个实践项目，他们的搜索栏的宽度是响应的。但除此之外，网站通常都会有响应宽度的搜索字段（比如这一个！），我感觉我缺少了一个简单的方法来让它工作。
#search-wrapper {
    margin: 10rem auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;                    /* added this */
}
#searchbar {
    display: flex;
    align-items: center;
    width: 100%;                    /* here */
    min-width: 40rem;               /* here */
    max-width: 60rem;               /* here */
    border: .1rem solid rgba(0,0,0,.3);
    border-radius: 3rem;
    margin: 0 2rem;
    padding: .75rem 1.25rem;
    font-family: "Material Icons";
    font-size: 1.8em;
    color: rgba(0,0,0,.3);
}
#search-field {
    width: 100%;                    /* and here */
    margin: 0 1.5rem;
    border: none;
    font-family: Helvetica, sans-serif;
}