Как расположить список в ряд?

Question

Вопрос такой как расположить ссылки в ряд с отступом в право 18px.Вроде задал, но не работает.
https://codepen.io/camobap6/pen/qBbqzPQ

.footer__copyright {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 1.12;
    color: black;
    margin: 0;
}
.footer__link {
    color: black;
    margin: 0 18px 0 0px;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 1.12;
    text-decoration: none;
    display: inline;
}
.footer {
    margin: 92px 48px 24px;
    max-width: calc(100% - 96px);
    display: flex;
    border: 1px solid green;
    flex-direction: row;
    justify-content: space-between;
    height: 24px;
}
.footer__link-style{
  list-style-type:none;
}

<footer class="footer">
            <nav class="footer__links">
                <ul>
                    <li class="footer__link-style"><a class="footer__link" href="https://yandex.ru/maps">Карты</a></li>
                    <li class="footer__link-style"><a class="footer__link" href="https://yandex.ru/pogoda">Погода</a></li>
                    <li class="footer__link-style"><a class="footer__link" href="https://rasp.yandex.ru">Расписание</a></li>
                    <li class="footer__link-style"><a class="footer__link" href="https://calendar.yandex.ru">Календарь</a></li>
                    <li class="footer__link-style"><a class="footer__link" href="https://travel.yandex.ru">Путешествия</a></li>
                </ul>
            </nav>
            <h3 class="footer__copyright">&copy; Ivan Ivanov </h3>
        </footer>

Answer 1

Попробуй float:left для элемента списка(li) и убери margin для ul

и пользуйся отладчиком - здорово помогает

проверил - работает)

Answer 2

.footer__link-style{
  display: inline-block;
}

.footer__copyright {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 1.12;
    color: black;
    margin: 0;
}
.footer__link {
    color: black;
    margin: 0 18px 0 0px;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 1.12;
    text-decoration: none;
    display: inline;
}
.footer {
    margin: 92px 48px 24px;
    max-width: calc(100% - 96px);
    display: flex;
    border: 1px solid green;
    flex-direction: row;
    justify-content: space-between;
    height: 24px;
}
.footer__link-style{
  list-style-type:none;
  display: inline-block;
}

<footer class="footer">
            <nav class="footer__links">
                <ul>
                    <li class="footer__link-style"><a class="footer__link" href="https://yandex.ru/maps">Карты</a></li>
                    <li class="footer__link-style"><a class="footer__link" href="https://yandex.ru/pogoda">Погода</a></li>
                    <li class="footer__link-style"><a class="footer__link" href="https://rasp.yandex.ru">Расписание</a></li>
                    <li class="footer__link-style"><a class="footer__link" href="https://calendar.yandex.ru">Календарь</a></li>
                    <li class="footer__link-style"><a class="footer__link" href="https://travel.yandex.ru">Путешествия</a></li>
                </ul>
            </nav>
            <h3 class="footer__copyright">&copy; Ivan Ivanov </h3>
        </footer>

Answer 3

.some_parent_el {
  display: flex;
  margin: 0 -9px;
}

.some_el_link {
  padding: 0 9px;
}

Переходи на флексы!!!!!

Answer 4

ul{
display:flex;
}

footer__link-style{
margin-right:18px;
}

БЛОГ НА HUSL

Как расположить список в ряд?

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