文章/答案/技术大牛

发布

社区首页 >问答首页 >我如何使我的图标水平排列与我的下拉框？

问我如何使我的图标水平排列与我的下拉框？
EN

Stack Overflow用户

提问于 2018-11-16 01:55:44

回答 1查看 36关注 0票数 1

有点麻烦，把我的图标与我的下拉框。我用的是jQuery手机。我试过使用内联块功能，但我对它没有任何进展。

有人能帮我解决这个问题吗。谢谢

<head>
<!--jQuery CDN Hosted Files-->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body >
<div style="padding: 20px;">

<img src="https://lh4.googleusercontent.com/-HhNoCFJ803s/AAAAAAAAAAI/AAAAAAAAAAA/ABtNlbAXJpr-jDsvmXVw0tx4PHId84zrlw/mo/photo.jpg?sz=32" class="loginBoxImg">
  <select name="type" id="type">
      <img src="">
      <option value="">Account Type...</option>
      <option value="Teacher">Teacher</option>
      <option value="School">School</option>
  </select><br>
</div>
</body>

html

css

jquery-mobile

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-11-16 02:02:34

您可以使用flexbox来实现这一点，首先将select和img包装在容器中。

<head>
<!--jQuery CDN Hosted Files-->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body >
<div style="padding: 20px;" class="container">

<img src="https://lh4.googleusercontent.com/-HhNoCFJ803s/AAAAAAAAAAI/AAAAAAAAAAA/ABtNlbAXJpr-jDsvmXVw0tx4PHId84zrlw/mo/photo.jpg?sz=32" class="loginBoxImg">

  <select name="type" id="type" style="min-width:90%;">
      <option value="">Account Type...</option>
      <option value="Teacher">Teacher</option>
      <option value="School">School</option>
  </select><br>
</div>
</body>

然后给那个容器一个display: flex;

.container{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

最后，您需要给类.ui-select一个90%的宽度

.ui-select{
  width: 90%;
}

这里您有一个测试它的代码依赖，和这里信息有关的挠性盒和如何使用它，让我知道如果这有帮助！

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53330382

复制

相似问题

问我如何使我的图标水平排列与我的下拉框？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我如何使我的图标水平排列与我的下拉框？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我如何使我的图标水平排列与我的下拉框？
EN