Итак, я хочу отобразить <li> элементов в строке. Но когда я использую свойство display:inline в CSS, маркеры становятся скрытыми. Я пробовал это из вопроса

HTML

<div class="list">
        <ul class="list-inline">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
        </ul>
    </div>

И CSS

.list{
   display: inline;
}
.list-inline li{
    margin: 10px;
    display: inline;
}

display: inline вроде работает, но маркеры скрываются . Как я могу это исправить? Ознакомьтесь с JSFiddle

2
Tr0jAn 27 Ноя 2021 в 11:38

3 ответа

Лучший ответ

Вы можете использовать display: flex; для класса list-inline.

.list{
   display: inline;
}

.list-inline {
  display: flex;
}
.list-inline li{
    margin: 10px;
    /* display: inline; */
}
<div class="list">
        <ul class="list-inline">
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
        </ul>
</div>
2
kian 27 Ноя 2021 в 11:46
Спасибо!
 – 
Tr0jAn
27 Ноя 2021 в 11:51

Вы можете использовать эти стили.

.list{
    display: inline;
 }
 .list-inline li{
    margin: 10px;
 }
 .list-inline{
    display: flex;
 }

Вы этого хотите? Вы можете сделать ul гибким боксом! Если вы хотите узнать больше о маркерах в CSS, см. Эту документацию w3schools👇

https://www.w3schools.com/css/css_list.asp

2
Ambareesh 27 Ноя 2021 в 11:51

Я думаю, что inline сводит на нет пулю, но использование flex с flex-direction: row; в объявлении ul даст желаемый эффект ...

ul {
  flex-direction: row;
  display: flex;
}

.list {
}

.list-inline li {
  margin: 10px;
}
<div class="list">
        <ul class="list-inline">
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
        </ul>
</div>
2
Authentic Science 27 Ноя 2021 в 11:51