Đặt vị trí kiểu danh sách vào bên trong mục danh sách, xem bản trình diễn này .

CSS:

ul {
    list-style-position: inside;
}

Đây không phải là một câu trả lời nhưng nó có thể cung cấp cho người khác cái nhìn sâu sắc về một tình huống trực quan tương tự với một nhóm hoàn cảnh khác nhau.

Tôi đã gặp vấn đề tương tự, như vậy:

HTML của tôi trông như thế này:

<ul>
    <li>
        <a href="#">Link with several lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, commodi!</a>
        <p>Lorem ipsum dolor sit amet.</p>
    </li>
    <li>
        <a href="#">Link with several lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, commodi!</a>
        <p>Lorem ipsum dolor sit amet.</p>
    </li>
</ul>

Và CSS như thế này:

a {
    display: inline-block;
    vertical-align: middle;
}

Thấy phần vi phạm? Các vertical-align: middle;tuyên bố.

Có hai giải pháp:

Giải pháp 1

Xóa vertical-align: middle;hoàn toàn phần khai báo.

Giải pháp 2

Thay đổi giá trị: vertical-align: middle;thành vertical-align: top;.

Kết quả (như mong đợi lúc đầu):

Hi vọng điêu nay co ich.

Bạn có thể làm điều gì đó như sau:

(css)
li div:before
{
   background-image:url('bullet.png');
}

(html)
<ul>
    <li>
        <div>
            text<br />
            more text
        </div>

    </li>
</ul>