Есть следующие элементы интерфейса - поле ввода и лупа.
Как видно из скриншота нижняя граница поля ввода расположена под лупой. При этом при вводе текста в поле ввода текст не налезает на лупу, а отделен крестиком
Каким образом можно достичь этого, чтобы текст не налезал на лупу. а нижняя граница поля ввода была расположена под лупой? (желательно без float, но можно с флексом)
Привожу код для родителя
.crossline, .bottompart {
flex: 1;
/*width: 100%;*/
/*height: 33%;*/
}
.crosslineright {
width: 100%;
/*margin-top: 40px;*/
/*margin-left: 20px;*/
/*margin-right: 20px;*/
/*align: right;*/
text-align: right;
}
.close {
margin-top: -14px;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
font-size: 24px;
cursor: pointer;
display: inline-block;
}
.CatalogMenuSearch {
border-bottom: 1px solid orange;
}
#SearchBlock {
padding-top: 5px;
padding-left: 25px;
padding-right: 50px;
display: flex;
height: 35px;
border-bottom: 1px;
}
#SearchInputdiv {
height: 100%;
}
#SearchButtondiv {
height: 100%;
}
#SearchButton button svg {
vertical-align: middle;
}
<div id="dropdownwindowright">
<div class="crosslineright">
<div class="close">×</div>
</div>
<div class="CatalogMenuSearch">
<div id="SearchBlock">
<div id="SearchInputdiv">
<input type="search" placeholder="Поиск по товарам" id="SearchInput">
</div>
<div id="SearchButtondiv">
<button id="SearchButton"><svg class=" Icon" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.22703 5.22703C7.86307 2.591 12.1369 2.591 14.773 5.22703C17.2298 7.68382 17.3968 11.5632 15.2742 14.2135L19.0607 18L18 19.0607L14.2135 15.2742C11.5632 17.3968 7.68381 17.2298 5.22703 14.773C2.59099 12.1369 2.59099 7.86307 5.22703 5.22703ZM13.7123 6.28769C11.6621 4.23744 8.33794 4.23744 6.28769 6.28769C4.23744 8.33795 4.23744 11.6621 6.28769 13.7123C8.33794 15.7626 11.6621 15.7626 13.7123 13.7123C15.7626 11.6621 15.7626 8.33795 13.7123 6.28769Z"></path></svg></button>
</div>
</div>
</div>
<div class="CatalogMenuRight">
</div>
</div>
В результате на экран выводится
В блоке с классом .CatalogMenuSearch
задана нижняя рамка - border-bottom: 1px
, которая не отображается.
position: relative;
, а кнопке с лупойposition: absolute;
и указать как отступы, так и габариты. Вообще же, здесь принято задавать вопросы, размещая в них не только скриншоты.display: flex
и "нарисовать" нижнюю рамку. 2. Деткам: инпуту и кнопке задать расположение, а кнопке ещё и размеры.border-bottom: 1px solid orange;