如何使用em設置輸入字段寬度並禁用它以在內容區域上擴展？

看到這個FIDDLE CODE和FIDDLE DEMO，嘗試調整你的窗口瀏覽器的大小，然後滾動到右側，看到輸入字段擴展自己。如何使用em設置輸入字段寬度並禁用它以在內容區域上擴展？

我嘗試使用%如寬度，我知道是relative寬度其含有<div>但最小化瀏覽器的尺寸，input場減小它的尺寸或縮小。

爲了更清楚，我的問題是如何設置輸入字段使用'EM'或px而不擴展到瀏覽器最小化時的內容區域？

任何幫助非常感謝或任何建議？

來源

2014-12-11 bumbumpaw

小提琴演示不工作，鏈接是導致無處 – Shadi 2014-12-11 05:46:18

@Shadi鏈接工作正常，先生，它顯示了一個藍色標題.. – bumbumpaw 2014-12-11 05:47:59

反正，你是否正在縮小DIV與輸入字段？你如何衡量包含輸入的DIV的大小？ – Shadi 2014-12-11 05:49:26

這應該工作：

<input type="text" style="width: 50px" />

來源

2014-12-11 05:39:54 AkiEru

好，一般如果你想爲你設計需要設置一些通用規則，如Web以下：

- 寬度應爲％

- 邊距和填充應該是絕對值

你可以閱讀更多關於這個迴應式網頁設計理念，an excellent book

下面是一個開始爲您設計自適應網頁設計：

<style> 
    #maincontainer 
    { 
     margin: 0 auto; 
     width: 68.1%; /* 740/1600 */ 
     border: 1px solid black; 
     height: 100%; 
    } 

    #header 
    { 
     width:100%; 
     margin:10px; 
    } 

    #sideBarContentWrapper 
    { 
     width:100%; 
     margin:10px; 
    } 

    #contentContainer 
    { 
     width:100%; 
    } 

    .custominput 
    { 
     width:70%; 
    } 

    #content 
    { 
     width:100%; 
    } 

    @media screen and (max-width: 700px) { 
     .custominput { 
      width: 50%; 
     } 
    } 

    @media screen and (max-width: 350px) { 
     .custominput { 
      width: 40%; 
    } 
} 
</style> 

<div id="mainContainer"> 

    <div id="header"> 
     <h1>Sample header 1</h1> 
     <h2>Sample header 2</h2> 
     <h4>Sample header 3</h4> 
    </div> 
    <!-- header, END --> 

    <div id="sideBarContentWrapper"> 

     <div id="contentContainer"> 

      <div id="content"> 
       <label>Sample Label 1</label><input type='text' class="custominput"> 
       <br /> 
       <br /> 
       <label>Sample Label 2</label><input type='text' class="custominput"> 
      </div> 
      <!-- content, END --> 

     </div> 
     <!-- contentContainer, END --> 

     <div id="sideBar"> 


      <p>This is some sample text to go in the side bar</p> 


     </div> 
     <!-- sideBar, END --> 

     <div style="clear:both;"></div> 

    </div> 
    <!-- sideBarContentWrapper, END --> 

</div> 
<!-- mainContainer, END -->

來源

2014-12-11 06:28:09 Shadi

如何使用em設置輸入字段寬度並禁用它以在內容區域上擴展？

回答

相關問題