单独对齐导航栏中的元素

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”显示在最右侧的方式显示项目。 我在这样做时遇到了麻烦。

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

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

Answer 1

有很多方法，但我不建议只为样式添加元素。一个简单的方法是用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;
}

Answer 2

这是快速修复

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>
         );