在导航栏中定位项目

Question

我是编码的初学者，并尝试使用 React 为学生项目创建网页。

我在为页面创建导航栏时遇到问题。如何将项目（Home、Project、Team、Kontakt）定位到栏的右侧？

这是它目前的样子：[1]：https://i.stack.imgur.com/gUJPi.png

这是我目前使用的代码：

   const navbar = props => (
            <nav className="navbar">
                <div className="container" >
                    <div className="navbar__bubble">
                        <IoIosChatbubbles size="2.3em"></IoIosChatbubbles>
                    </div>
                    <div className="navbar__title">
                        <h2>Our project</h2>
                    
                    </div>
                    <div className="navbar__navigation-items">
                        <ul>
                            <li><NavLink to="/" activeClassName="is-active" exact={true}>Home</NavLink></li>
                            <li><NavLink to="/projekt" activeClassName="is-active">Project</NavLink></li>
                            <li><NavLink to="/team" activeClassName="is-active" exact={true}>Team</NavLink></li>
                            <li><NavLink to="/kontakt" activeClassName="is-active">Kontakt</NavLink></li>
                        </ul>
                    </div>
                </div>
                
            </nav>       
    );

& 容器和导航栏的 scss 代码：

.container {
    max-width: 115rem;
    margin: 0 10rem;
    padding: 0 $m-size;
    display: flex;
}

和

.navbar {
    background: #E3E9EE;
    position: fixed; 
    width: 100%;
    top: 0;
    padding: .7rem 0;
    height: 80px;
    display: flex;
    border-bottom: 1px solid lighten(#2C465F, 30%);
}

.navbar__bubble {
    color: #2C465F;
    cursor: pointer;
    margin-top: 20px;
}

.navbar__title {
    color: #2C465F;
    cursor: pointer;
    margin: 30px;
    margin-left: 10px;
    margin-top: 5px;
    font-size: $m-size;
}

.navbar__navigation-items {
    margin-top: 30px;
    font-size: $m-size;
}

.navbar__navigation-items ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-gap: 20px; 
    list-style: none;
    float: right;
}

.navbar__navigation-items a:hover,
.navbar__navigation-items a:active {
    color: #2C465F;
}

.navbar__subtitle {
    margin-top: 28px;
}

提前感谢您的帮助！ :) (

Answer 1

包装你的左元素并使用flexbox

.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

 const navbar = props => (
            <nav className="navbar">
                  <div className="container" >
                      <div className="navbar__left">
                          <div className="navbar__bubble">
                              <IoIosChatbubbles size="2.3em"></IoIosChatbubbles>
                          </div>
                          <div className="navbar__title">
                              <h2>Our project</h2>

                          </div>
                    </div>
                    <div className="navbar__navigation-items">
                        <ul>
                            <li><NavLink to="/" activeClassName="is-active" exact={true}>Home</NavLink></li>
                            <li><NavLink to="/projekt" activeClassName="is-active">Project</NavLink></li>
                            <li><NavLink to="/team" activeClassName="is-active" exact={true}>Team</NavLink></li>
                            <li><NavLink to="/kontakt" activeClassName="is-active">Kontakt</NavLink></li>
                        </ul>
                    </div>
                </div>
                
            </nav>       
    );

Answer 2

我会将 flex: 1 添加到 .navbar__title 中。它会尽可能地把它后面的所有东西推到右边。

Answer 3

对项目使用 flexbox。我确实对代码进行了一些更改，并使其对 HTML-CSS 友好，因此将其调整为 React（类名、RouterLinks 等）。

总结：导航应用了display: flex，它有2个子元素（徽标+标题和菜单），我添加了justify-content: space-between。

在<ul> 类中，我添加了另一个display: flex，因此项目表现为一行。默认情况下，flex-direction 是 row。如果您想要任何内容​​作为列，则必须添加flex-direction: column。

这是一个有效的 sn-p：

* {
  list-style: none;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar__navigation-items ul {
  display: flex;
}

.navbar__navigation-items ul li {
  margin-right: 10px;
}

 <nav class="navbar">
   <div class="container">
     <div class="navbar__bubble">
       <IoIosChatbubbles size="2.3em"></IoIosChatbubbles>
     </div>
     <div class="navbar__title">
       <h2>Our project</h2>
     </div>
   </div>
   <div class="navbar__navigation-items">
     <ul>
       <li>Home</li>
       <li>Project</li>
       <li>Team</li>
       <li>Kontakt</li>
     </ul>
   </div>
 </nav>

Answer 4

您需要做的就是为您的navbar__navigation-items 样式添加margin-left: auto。

这会将您的 navbar__navigation-items 定位到右侧，并将同一容器中的其他所有内容推到左侧。

另一种选择是使用 flexbox。对于您的container 应用display: flexbox。并添加justify-content: space-between;，它也可以工作。但这将控制container 中的所有其他元素根据该调用进行行为。

---

检查下面，我已经完成并且一切正常。

.navbar {
    background: #E3E9EE;
    position: fixed; 
    width: 100%;
    top: 0;
    padding: .7rem 0;
    height: 80px;
    display: flex;
    border-bottom: 1px solid lighten(#2C465F, 30%);
}
.container {
    max-width: 115rem;
    padding: 0 $m-size;
    display: flex;
    width: 100%;
}

.navbar__bubble {
    color: #2C465F;
    cursor: pointer;
    margin-top: 20px;
}

.navbar__title {
    color: #2C465F;
    cursor: pointer;
    margin: 30px;
    margin-left: 10px;
    margin-top: 5px;
    font-size: $m-size;
}

.navbar__navigation-items {
    margin-top: 30px;
    font-size: $m-size;
    margin-left: auto;
}

.navbar__navigation-items ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-gap: 20px; 
    list-style: none;
}

.navbar__navigation-items a:hover,
.navbar__navigation-items a:active {
    color: #2C465F;
}

.navbar__subtitle {
    margin-top: 28px;
}

<nav class="navbar">
    <div class="container" >
        <div class="navbar__title">
            <h2>Our project</h2>

        </div>
        <div class="navbar__navigation-items">
            <ul>
                <li><a>One</a></li>
                <li><a>Two</a></li>
                <li><a>Three</a></li>
                <li><a>Four</a></li>
            </ul>
        </div>
    </div>
</nav>

Answer 5

有多种方法可以做到这一点，但添加

浮动：右

到

.navbar__navigation-items {
    margin-top: 30px;
    font-size: $m-size;
    float: right;
}

应该做的伎俩， 可能还需要将 width: 100% 添加到容器中

.container {
  max-width: 115rem;
  margin: 0 10rem;
  padding: 0 $m-size;
  display: flex;
  width: 100%;
}

编辑： 我同意 float 不是最好的工具，但我建议使用它，因为他已经在他的代码中使用它并且只需要更改 css 但https://stackoverflow.com/a/63427704/8382007 回答宽度为 100%

.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

当然更好