在导航栏中单独对齐元素

Question

我正在尝试使用 ReactJS 创建一个前端。正在使用 tabler-react.

创建页面的不同组件

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

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

这是快速修复

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

有很多方法，但我不建议仅仅为了样式而添加元素。一个简单的方法是 select 应该是左边最后一个元素的元素 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;
}

在导航栏中单独对齐元素

Individually align elements within a Navigation Bar

html

css

frontend

web-frontend

reactjs