Question

一直试图让搜索栏默认为500px，并使用屏幕缩小尺寸直到它达到200px，同时保持居中。我希望它是移动友好的。我已经尝试了几个小时的不同实现方法，但却没有看到它为什么不能正常工作。

HTML：

<div class="container">
      <div class="search-container">
           <div class="search">
                <form id="search-form">
                    <input class="searchbar" title="Search" placeholder="Search"/>
                </form>
           </div>
      </div>
</div>

CSS：请参阅：http://jsfiddle.net/3dXD5/

Answer 1

默认情况下，内联块元素无法填充其容器，因此您需要在容器上设置width属性以及min-width和max-width。

width属性告诉元素＆＃34;尝试＆＃34;为100％，但max-width和min-width覆盖width并将值限制在您指定的范围内。

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

更新了小提琴：http://jsfiddle.net/3dXD5/1/

注意，我还删除了内部元素上的margin，因为100％width与margin相结合会将其推向偏离中心的位置。如果你想重新引入这个间距，一种方法是从display:inline-block div中移除width:100%和search（它会自然地填充它的容器），并添加{{ 1}}那里。

无法使min-width max-width搜索栏正常运行

1 个答案: