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

浏览器为ul提供了默认填充（例如Chrome为其提供40px）。您需要像这样将其设置为0：

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

Answer 2

如果我的理解正确，您难道不就使用固定吗？

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

它会从弹性流中删除（我相信），因此您可能需要基于此调整其他一些功能。

Answer 3

ul具有默认的填充，您需要覆盖它。看这里。 http://jsfiddle.net/bhupendra_nitt/1dxt36sb/6/

Answer 4

如果您的项目中没有重置浏览器，则应该这样做。使用规范化 https://necolas.github.io/normalize.css/或类似名称。这些问题大多数不会在您之后出现，但正如大家所说，我需要从ul

中删除默认填充

如何使div内的文本贴在左侧？

4 个答案: