Because in css text-align: right; does not work, and using the margin the result is shown in the photo below. Is there any way to fix this?

css:

 .gray { color: gray; margin-left: 3px; } .price { color: gray; /*text-align: right;*/ margin-left: 145px; }

html:

 <ul class="dropdown-menu" role = "menu"> <li class="list-group-item"><input type="checkbox">Все курорты, Турция</li> <div> <hr> <h6 class="dropdown-header">Популярные курорты</h6> <hr> </div> <li class="list-group-item"><input type="checkbox"> Аланья,<span class="gray">Турция</span><span class="price">от 18 963 р./чел.</span></li> <li class="list-group-item"><input type="checkbox"> Анталья,<span class="gray">Турция</span><span class="price">от 19 311 р./чел.</span></li> <li class="list-group-item"><input type="checkbox"> Белек,<span class="gray">Турция</span><span class="price">от 25 204 р./чел.</span></li> <li class="list-group-item"><input type="checkbox"> Бодрум,<span class="gray">Турция</span></li> <li class="list-group-item"><input type="checkbox"> Кемер,<span class="gray">Турция</span><span class="price">от 16 102 р./чел.</span></li> <li class="list-group-item"><input type="checkbox"> Мармарис,<span class="gray">Турция</span></li> <li class="list-group-item"><input type="checkbox"> Сиде,<span class="gray">Турция</span><span class="price">от 20 660 р./чел.</span></li> </ul>

enter image description here

    1 answer 1

    For adaptability and flexibility in the future, it's better to use flexbox Here is an example:

     <div class="flex"> <div class="left"> <input type="checkbox"> Аланья,<span class="gray">Турция</span> </div> <div class="right"> <span class="price">от 18 963 р./чел.</span> </div> </div>

    CSS:

     .flex { display: flex; justify-content: space-between; flex-wrap: wrap; }
    • I just started writing and here you are)) - user192664