Как использовать направление гибкости в упорядоченном списке в navbar с reactjs?

Привет, я создаю NavBar в ReactJs без какой-либо библиотеки пользовательского интерфейса, такой как bootstrap или материала, только 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;
}

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

Sushanth -- 13.09.2018 19:48
0
1
409
2

Ответы 2

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

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

Другие вопросы по теме