無法獲取最小寬度的最大寬度搜索欄的行爲正確

嘗試了幾個小時纔將搜索欄設置爲默認值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/

來源

2014-07-19 Celestriel

你應該在問題中包含CSS - 這是一件很棒的事情，但這個問題應該包含足夠的信息來支持自己。有關更多詳細信息，請參閱此討論http://meta.stackexchange.com/questions/149890/prevent-posts-with-links-to-jsfiddle-and-no-code – CupawnTae

inline-block的元素默認不會填寫自己的容器，所以你需要設置width屬性的容器上，以及min-width和max-width。

width屬性告訴元素「嘗試」爲100％，但max-width和min-width覆蓋width並將值限制在指定的範圍內。

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

更新撥弄：http://jsfiddle.net/3dXD5/1/

注意，我還內部元件上除去margin因爲對與margin組合物推動它偏離中心具有100％width。如果要重新引入該間距，則有一種方法是從search div中刪除display:inline-block和width:100%（它將自然填充其容器），並在其中添加padding。

來源

2014-07-19 08:01:39 CupawnTae

無法獲取最小寬度的最大寬度搜索欄的行爲正確

回答

相關問題