Css 无法使最小宽度最大宽度搜索栏正常工作

几个小时以来，我们一直在努力使搜索栏默认为500px，并缩小屏幕尺寸，直到它达到200px，同时保持居中。我希望它是移动友好。我已经尝试了几个小时不同的实现方法，但不明白为什么它不起作用

HTML:

---

CSS：请参见：

内联块元素在默认情况下不会填充其容器，因此您需要在容器上设置宽度属性以及最小宽度和最大宽度

width属性告诉元素尝试设置为100%，但max width和min width会覆盖width并将值钳制在指定的范围内

  width: 100%;
  max-width: 500px;
  min-width: 200px;

更新小提琴：

---

注意，我还删除了内部元素上的边距，因为该元素上的100%宽度加上边距会使其偏离中心。如果您想重新引入该间距，一种方法是从搜索div中删除display:inline block和width:100%，然后它会自然地填充其容器，并在其中添加填充。

您还应该在问题中包括CSS-有一把小提琴可以使用，这很好，但这个问题应该包含足够的信息，以便能够独立存在。有关更多详细信息，请参阅此讨论

  width: 100%;
  max-width: 500px;
  min-width: 200px;