Question

我正在尝试使用 ReactJS 创建前端。页面的不同组件是使用 tabler-react 创建的。

我正在尝试使用 Nav component in tabler-react 创建导航面板。返回函数如下所示：

return ( 
            <Nav >
                <Nav.Item to='#' value="Item1" />
                <Nav.Item to='#' value="Item2" />
                <Nav.Item to='#' value="Item3" />
                <Nav.Item to='#' value="Item4" />
            </Nav>
         );

默认情况下，它从屏幕最左侧开始一个接一个地显示。

我希望以“item1”和“item2”显示在最左侧而“item3”和“item4”显示在最右端的方式显示项目。< /strong> 我在这样做时遇到了麻烦。

我搜索了一个解决方案并了解到可以将样式属性设置为可以执行 justifyContent、alignment 等操作的标签。我尝试将此类样式属性设置为内部的各个标签，但它不会导致任何更改在呈现的页面中。

我是 ReactJS 和 JavaScript 的新手。所以我不确定这是否是我正在做的一个基本错误。任何帮助表示赞赏。谢谢。

Answer 1

这是快速修复

return ( 
            <Nav >
                <Nav.Item to='#' value="Item1" />
                <Nav.Item to='#' value="Item2" />
                 <div style={{
                       marginLeft: 'auto'
                 }} />
                <Nav.Item to='#' value="Item3" />
                <Nav.Item to='#' value="Item4" />
            </Nav>
         );

Answer 2

有很多方法，但我不建议仅仅为了样式而添加元素。一个简单的方法是用 nth-child(n) 选择应该是左边最后一个元素的元素，然后添加 margin-right: auto。如果您愿意，您可以使用下一个元素执行此操作，如果您愿意，可以改为应用 margin-left: auto。

HTML

<nav>
   <a href="#">Link 1</a>
   <a href="#">Link 2</a>
   <a href="#">Link 3</a>
   <a href="#">Link 4</a>
</nav>

CSS

nav {
  display: flex;
}

nav a:nth-child(2) {
  margin-right: auto;
}

单独对齐导航栏中的元素

2 个答案: