Как разместить и

Работаю над отображением товара в выпадающем меню, мне нужно расположить в выпадающем меню тег 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;
}

Буду рад услышать ваши советы!


Ответы (0 шт):