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

Question

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

В настоящее время он выглядит следующим образом:

Вот как сейчас настроена боковая панель:

export default class SideBar extends PureComponent {
    render() {
        return (
            <div className="sidebar-container">
                <ul class="sidebar-list">
                    <li role="presentation" class="active"><a href="#">Home</a></li>
                    <li role="presentation"><a href="#">Profile</a></li>
                    <li role="presentation"><a href="#">Messages</a></li>
                </ul>
            </div>
        );
    }
}

с css

.sidebar-container {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    flex-shrink: 1;
    z-index: 999;
    // width: 20px;
}

.sidebar-container > ul {
    list-style: none;
}

.sidebar-list > li {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: tb-lr;
            writing-mode: vertical-lr;
    // background-color: pink;
    color: white;
}

.sidebar-list > li > a {
    color: red;
    text-decoration: none;
    text-transform: uppercase;
    margin-top: 16px;
    background-color: green;
    font-size: 5vh;
}

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

Answer 1

Если у вас нет сброса браузера в вашем проекте, вам следует это сделать.Используйте normalize https://necolas.github.io/normalize.css/ или что-то подобное.Большинство из этих проблем не будут появляться после вас, но я, как все говорили, вам нужно удалить отступ по умолчанию из ul

Answer 2

Браузеры дают ul sa заполнение по умолчанию (например, Chrome дает ему 40px).Вам нужно установить это значение в 0 следующим образом:

.sidebar-container > ul {
    list-style: none;
    padding: 0;
}

Answer 3

ul имеет заполнение по умолчанию, вам нужно переопределить его.Посмотреть здесь.http://jsfiddle.net/bhupendra_nitt/1dxt36sb/6/

Answer 4

Если я правильно понимаю, не могли бы вы просто использовать фиксированный?

.sidebar-container {
  position: fixed;
  top: 0;
  left: 0;
}

Он будет удален из гибкого потока (я полагаю), так что вам может понадобиться настроить некоторые другие биты и бобыосновываясь на этом.