在导航栏中放置项目

问题描述

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

为页面创建导航栏时出现问题。如何将项目（家庭，项目，团队，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;
}

在此先感谢您的帮助！ :)（

解决方法

环绕元素，然后使用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>       
    );

我要在.navbar__title中添加flex：1。它将所有内容尽力推向右侧。

将 flexbox 用于项目。我确实更改了代码，并使其对HTML-CSS友好，因此将其修改为适用于React（className，RouterLinks等）。

摘要：Nav已应用display: flex，并且具有2个子元素（徽标+标题和菜单），我添加了justify-content: space-between。

在<ul>类中，我添加了另一个display: flex，因此各项表现为一行。默认情况下，伸缩方向为行。如果要将任何内容用作列，则必须添加flex-direction: column。

这是一个有效的代码段：

* {
  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>

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

这会将您的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>

除了添加

外，还有多种方法

浮动：对

到

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

应该可以解决问题，可能还需要增加宽度：100％也要添加到容器中

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

编辑：我同意浮动不是最好的工具，但我建议使用浮动工具，因为他已经在代码中使用了浮动工具，并且只需要更改CSS即可，但是https://stackoverflow.com/a/63427704/8382007的答案宽度为100％

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

肯定更好

html navbar positioning reactjs reactjs

在导航栏中放置项目

问题描述

解决方法

相关问答