Как использовать направление Flex в упорядоченном списке в NavBar с Reactjs?

Question

Привет, я строю NavBar в ReactJ без какой-либо библиотеки пользовательского интерфейса, такой как начальная загрузка или материал только CSS, и я хочу использовать flex-direction: row в ol, но он не работает.Вы можете увидеть мой код ниже для компонента NavBar.

    import React, { Component } from 'react';
    import './landingnav.css';


export default class LandingNav extends Component {
  render() {
    return (
      <div className="navcontainer">
      <div className="navbarlogo">
        <h3>Codolas</h3>
        </div>
        <div className="navitems">
            <ol className="leftlist">
                <li>Why Codolas?</li>
                <li>Solutions</li>
                <li>About us</li>
                </ol>
        </div>
      </div>
    );
  }
}

Вот CSS для того же компонента

.navcontainer {
    background-color: rgb(97, 252, 162);
    height: 84px;
    top: 0;
    width: 100%;
    margin-top: -18px;
}

.navbarlogo h3 {
    position: absolute;
    font-size: 28px;
    color: rgb(0, 0, 0);
    left: 0px;
}

.leftlist {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

li {
    list-style-type: none;
}

Answer 1

Я только что обнаружил проблему после добавления позиции: относительно navcontainer, я просто добавил ol и вставил в нее стили flex, и это сработало.Спасибо всем.Счастливого кодирования

Answer 2

Попробуйте согнуть элементы списка: 1, дети не знают, сколько сгибать в пространстве.