Как разместить и
Работаю над отображением товара в выпадающем меню, мне нужно расположить в выпадающем меню тег span и button на одном уровне. Однако у меня это не выходит, пробовал играть со свойством float, но это не принесло пока что нужного варианта. Подскажите, какие свойства CSS необходимо применить, чтобы кнопка располагалась в одной строке с тегом span?
Вот HTML корзины и "её содержимого":
<div class="cart" id="cart">
<a href="/pages/Basket/index.html">
<img style="width: 65px; height: 65px;" class="cart__image" src="/img/shopping-basket.png" alt="Cart" />
<div class="cart__num" id="cart_num">0</div>
</a>
<ul class="cart-menu">
<li>
<img class="img-basket" src="/img/03a0690e131751b_350x350.jpg" alt="">
<span>Ротационная вентиляционная турбина, Ø 160/355 мм</span>
<br>
<span class="commerce-basket">1x1 799₽/шт</span>
<button class="remove-button">x</button>
</li>
<hr>
<li>
<img class="img-basket" src="/img/5586bc7b9eebc44_250x250.jpg" alt="">
<span>Битум БН 70/30 25кг</span>
<br>
<span class="commerce-basket">1x1 200₽/шт</span>
<button class="remove-button">x</button>
</li>
<hr>
<li>
<img class="img-basket" src="/img/6044588e538dead_350x350.jpg" alt="">
<span>Проходной элемент, кровли...</span>
<br>
<span class="commerce-basket">1x1 799₽/шт</span>
<button class="remove-button">x</button>
</li>
<hr>
</ul>
</div>
А вот CSS свойства которые привязаны к этому коду:
.cart {
width: 75px;
height: 75px;
margin-right: 13%;
border-radius: 50%;
background-color: #364364;
transition: 0.1s;
cursor: pointer;
position: fixed;
/* Фиксированное расположение */
top: 50px;
/* в правом верхнем углу */
right: 50px;
display: flex;
justify-content: center;
align-items: center;
object-fit: contain;
padding: 15px;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
}
.img-basket {
width: 50px;
height: 50px;
border: 0.5px solid #000;
float: left;
}
.commerce-basket {
max-width: 90px;
}
.remove-button {
border: 0px solid #202020;
background-color: #fff;
}
.remove-button:hover {
color: #d62240;
}
.cart:hover .cart-menu {
display: block;
}
.cart-menu {
display: none;
position: absolute;
background-color: #fff;
padding: 10px;
list-style: none;
height: auto;
width: 350px;
top: 90%;
border: 1px solid #202020;
max-height: 200px;
/* Adjust the height as needed */
overflow-y: auto;
cursor: default;
}
.cart-menu > li > span {
margin-left: 18%;
display: block;
width: 165px;
}
Буду рад услышать ваши советы!