将水平ul项目符号列表与自定义项目符号对齐

Question

我有一个带有自定义项目符号的ul列表（下图）。

项目符号和文本在底部对齐。我想在列表中垂直放置文本。

我尝试对其进行一些操作：

vertical-align: middle;
text-align: top;
margin-top: -5px; 

但这没有帮助。我该怎么做才能使文本与项目符号对齐？

HTML：

                    <ul class="custom-ul-bullets">
                        <li class="filter-option">
                            <input type="radio" class="visually-hidden filter-input filter-input-radio" name="product-group" value="adaptive" checked>
                            <p class="try_it">Адаптивная</p>
                        </li>
                        <li class="filter-option">
                            <input type="radio" class="visually-hidden filter-input filter-input-radio" name="product-group" value="fixed">
                            <p class="try_it">Фиксированная</p>
                        </li>
                        <li class="filter-option">
                            <input type="radio" class="visually-hidden filter-input filter-input-radio" name="product-group" value="rubber">
                            <p class="try_it">Резиновая</p>
                        </li>
                    </ul>

当前CSS：

ul.custom-ul-bullets {
    list-style-image: url('/img/svg-nerds/radio-off.svg');
    border: 1px solid;
}

.filter-option {
    border: 1px solid;
}

.try_it {

}

Answer 1

文本看起来正确，我认为项目符号不正确。您应该尝试将它们放在css所在的框或<div>中。另外，请尝试对子弹元素使用margin-top或padding-top并将它们调整3-4px，看看是否可行。