gpt4 book ai didi

html - 如何让我的图标与我的下拉框水平对齐?

转载 作者:行者123 更新时间:2023-11-28 14:37:09 26 4
gpt4 key购买 nike

在将我的图标与我的下拉框对齐时遇到了一些麻烦。我正在使用 jQuery Mobile。我试过使用内联 block 功能,但我没有运气。

谁能帮我解决一下。谢谢

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

最佳答案

你可以使用 flexbox 来实现这一点,首先将 selectimg 包装在一个容器中

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

Here你有一个 codepen 来测试它,并且 here有关 flexbox 及其使用方法的信息,如果有帮助请告诉我!

关于html - 如何让我的图标与我的下拉框水平对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53330382/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com