在html5中的列表框不改變

我想改變html5中列表框的大小，我一直在嘗試很多從這個問題的答案的解決方案，但沒有工作！列表框中不會改變在html5中的列表框不改變

注：I'me使用科爾多瓦爲您在圖片列表框就像是屏幕寬度看到建立一個跨平臺的移動應用程序，我想改變它

這是我的代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 

    <style> 
     #social_icons { 
      /*padding: .5em;*/ 
      padding: 0; 
      line-height: 2.7; 
      -webkit-columns: 150px 2; 
      font-size: 1.2em; 
     } 

     .topmenu li { 
      display: inline-block; 
     } 

     #footer { 
      clear: both; 
      position: relative; 
      z-index: 10; 
      height: 3em; 
      margin-top: -3em; 
     } 
     #wgmstr { 
    max-width: 30px; 
    min-width: 30px; 
    width: 30px !important; 
} 
    </style> 
</head> 
<body> 
    <div id="wrapper"> 

     <div data-role="page" id="pageone"> 

      <div data-role="header"> 
       <h1>menu</h1> 
       <div data-role="navbar"> 
        <ul> 
         <li><a href="http://localhost:4400/homePageArabic.html" data-icon="back"> back</a></li> 
         <li><a href="#" data-icon="gear"></a></li> 
        </ul> 

       </div> 

      </div> 

      <div data-role="main" class="ui-content"> 
       <select name="wgtmsr" id="wgtmsr"> 
        <option value="jan">Jan</option> 
        <option value="feb">Feb</option> 
        <option value="march">March</option> 
        <option value="april">April</option> 
        <option value="may">May</option> 
        <option value="june">June</option> 
        <option value="july">July</option> 
        <option value="august">Aug</option> 
        <option value="sep">Sep</option> 
        <option value="oct">Oct</option> 
        <option value="nov">Nov</option> 
        <option value="dec">Dec</option> 
       </select> 
      </div> 

      <div id="footer" data-role="footer" style="text-align:center"> 
       <h1></h1> 


       <div id="social_icons"> 
        <a href="https://www.instagram.com/" target="_blank"><img src="images/1479300106_instagram.png" align="middle"></a> 
        <a href="https://www.facebook.com/" target="_blank"><img src="images/1479300135_facebook.png" align="middle"></a> 
        <a href="https://www.youtube.com/" target="_blank"><img src="images/1479310570_youtube.png" align="middle"></a> 
        <a href="https://twitter.com/" target="_blank"><img src="images/1479300112_twitter.png" align="middle"></a> 


       </div> 
      </div> 
     </div> 
    </div> 


</body> 
</html>

來源

2016-11-16 user3599431

我注意到你的意思。下拉菜單是頁面的寬度。

當我開始時，我也注意到頁腳位於下拉列表的頂部，所以我添加了額外的CSS將它推到底部，居中顯示社交圖標，並在社交圖標下面添加<h1></h1>。

我創建了一個jsFiddle，供您審查。

我添加了下面的CSS來調整下拉框的大小，到目前爲止，我添加的行只佔用頁面的50％，但您可以根據自己的喜好調整大小。

讓我知道是否有幫助。

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    margin-bottom: 60px; 
 
} 
 

 
#pageone { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 

 
.ui-content { 
 
    width: 50%; /* adjust drop-down size here to whatever size you would like. */ 
 
} 
 

 
#social_icon { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#social_icons a { 
 
      left: auto; 
 
      right: auto; 
 
      display: inline; 
 
      border: none; 
 
      text-decoration: none; 
 
      padding-right: 20px; 
 
     } 
 

 
     .topmenu li { 
 
      display: inline-block; 
 
     } 
 

 
     /* added code to push footer to bottom. */ 
 
     #footer { 
 
      position: absolute; 
 
      bottom: 0; 
 
      height: 60px; 
 
      width:100%; 
 
      text-align: center; 
 
     } 
 

 
     #footer p { 
 
     clear: both; 
 
     color: black; 
 
     opacity: 0.3; 
 
     } 
 
     #wgmstr { 
 
    max-width: 30px; 
 
    min-width: 30px; 
 
    width: 30px !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"/> 
 

 
<div data-role="page" id="pageone"> 
 
     <div data-role="header"> 
 
     <h1>menu</h1> 
 
     <div data-role="navbar"> 
 
      <ul> 
 
      <li><a href="http://localhost:4400/homePageArabic.html" data-icon="back"> back</a></li> 
 
      <li><a href="#" data-icon="gear"></a></li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
     <div data-role="main" class="ui-content"> 
 
     <select name="wgtmsr" id="wgtmsr"> 
 
      <option value="jan">Jan</option> 
 
      <option value="feb">Feb</option> 
 
      <option value="march">March</option> 
 
      <option value="april">April</option> 
 
      <option value="may">May</option> 
 
      <option value="june">June</option> 
 
      <option value="july">July</option> 
 
      <option value="august">Aug</option> 
 
      <option value="sep">Sep</option> 
 
      <option value="oct">Oct</option> 
 
      <option value="nov">Nov</option> 
 
      <option value="dec">Dec</option> 
 
     </select> 
 
     </div> 
 
     <div id="footer" data-role="footer"> 
 
     <div id="social_icons"> 
 
      <a href="https://www.instagram.com/" target="_blank"><img src="images/1479300106_instagram.png" align="middle"></a> 
 
      <a href="https://www.facebook.com/" target="_blank"><img src="images/1479300135_facebook.png" align="middle"></a> 
 
      <a href="https://www.youtube.com/" target="_blank"><img src="images/1479310570_youtube.png" align="middle"></a> 
 
      <a href="https://twitter.com/" target="_blank"><img src="images/1479300112_twitter.png" align="middle"></a> 
 
     </div> 
 

 
     <p>&copy; 2016</p> 
 
     </div> 
 
    </div>

來源

2016-11-16 18:37:26 jameswassinger

感謝ü這麼多。這是有幫助 – user3599431

在html5中的列表框不改變

回答

相關問題