возникли проблемы с выравниванием моей иконки в раскрывающемся списке.Я использую jQuery Mobile.Я попытался использовать функцию встроенного блока, но мне не повезло с этим.
Может кто-нибудь помочь мне с решением.Спасибо
<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, сначала обернуть select и img в контейнер
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;
display: flex;
.container{ display: flex; justify-content: space-between; align-items: center; }
И, наконец, вам нужно дать классу .ui-select ширину 90%
.ui-select
.ui-select{ width: 90%; }
Здесь у вас есть кодовая ручка для проверки, а здесь информация о flexbox и как его использовать, дайте мне знать, если это поможет!