html5中的列表框不会改变

Question

我想改变html5中列表框的大小，我一直在尝试从这些问题的答案中找到许多解决方案，但都没有效果!!列表框不会改变

注意：我使用Cordova创建跨平台移动应用 如图所示，列表框就像屏幕宽度，我想改变它

这是我的代码：

ggplot(mtcars, aes(x = gear)) + geom_bar()+
  geom_text(stat='count',aes(label=..count..),vjust=-1)

Answer 1

我注意到你的意思。下拉菜单是页面的宽度。

当我开始时，我也注意到页脚位于下拉列表的顶部，因此我添加了额外的CSS以将其推到底部，将社交图标居中并在社交图标下方添加<h1></h1>。

我创建了jsFiddle，供您查看。

我添加了以下CSS来调整下拉框的大小，截至目前我添加的行仅占用了50％的页面，但您可以根据自己的喜好调整大小。

如果有帮助，请告诉我。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;