Блог

Главная - Вопросы по программированию - Как сделать так, чтобы элемент списка отображался встроенным?

Как сделать так, чтобы элемент списка отображался встроенным?

#html #css #responsive-design #responsive

Вопрос:

Название говорит почти обо всем. Всякий раз, когда я использую display: inline css для элемента списка, он ничего не делает.

[![Изображение проблемы][1]][1]

Я бы хотел, чтобы элементы списка отображались встроенно, если бы кто-нибудь мог помочь мне направить меня в правильном направлении, я был бы очень признателен.

CSS

 .clipit-routes {
    flex: 2;
    justify-content: center;
}

.nav-links {
    justify-content: space-around;
    list-style: none;
}

.nav-link {
    display: flex;
    text-decoration: none;
    display: inline;
}

HTML

             <div class="clipit-routes">
                <ul class="nav-links">
                    <li><a href="#" class="nav-link">Upload</a></li>
                    <li><a href="#" class="nav-link">About</a></li>
                    <li><a href="#" class="nav-link">Github</a></li>
                </ul>
            </div>


  [1]: https://i.stack.imgur.com/AidjI.png

Комментарии:

1. Не могли бы вы поместить рабочий фрагмент, который показывает проблему (т. Е. Включая базовый HTML). Вы имели в виду перезаписать display: flex с помощью display: inline?

2. Наличие гибкого дисплея и его отсутствие ничего не меняют. Фрагмент CSS уже есть в посте, я также добавлю фрагмент html.

3. Наличие ul в качестве встроенного дисплея не влияет на элементы li. Вы пытаетесь встроить элементы li?

4. Да! Я пытаюсь заставить элементы li отображаться встроенно

5. Я добавил «.nav-link li» в css и добавил встроенный дисплей для него. По-прежнему ничего.

Ответ №1:

Требуется пара небольших изменений: nav-ссылка должна быть nav-ссылками в окончательной настройке класса, и вы хотите встроить элементы li, а не элемент ul.

 .clipit-routes {
  flex: 2;
  justify-content: center;
}

.nav-links {
  justify-content: space-around;
  list-style: none;
}

.nav-links li {
  display: flex;
  text-decoration: none;
  display: inline;
} 
 <div class="clipit-routes">
  <ul class="nav-links">
    <li><a href="#" class="nav-link">Upload</a></li>
    <li><a href="#" class="nav-link">About</a></li>
    <li><a href="#" class="nav-link">Github</a></li>
  </ul>
</div>
Метки: ,