將div移動到導航欄的右側-有解無憂

**我想將 className Navbar_icon 的 div 移動到導航欄的右側。Navbar_icon 包含搜索、幫助、登錄。我想將 className Navbar_icon 的 div 移動到導航欄的右側。Navbar_icon 包含搜索、幫助、登錄。** 當前導航欄的影像：< 將 div 移動到導航欄的右側 >

REACT COMPONENT JSX CODE :

            <div className="Navbar">
                <h1 className="logo">eat24/7</h1>
                <div className="Navbar_icons">

                    <div className="Search">
                        <SearchRoundedIcon />
                        <p>Search</p>
                    </div>


                    <div className="Help">
                        <HelpOutlineTwoToneIcon />
                        <p>Help</p>
                    </div>


                    <div className="Sign_In">
                        <PersonOutlineIcon />
                        <p>Sign In</p>
                    </div>
                </div>
            </div>



CSS CODE :
.Navbar{
    height: 80px;
    padding-left: 80px;
    padding-right: 80px;
    padding-top: 35px;
    display: flex;
}
.logo{
    font-family: 'Andada Pro', serif;
    color: orangered;
    font-weight: bolder;
    float: left;
}

.Navbar_icons{
    display: flex;
    position: relative;
    float: right;
}

.Search, .Help, .Sign_In{
    display: flex;
    margin-right: 10px;
    text-align:center;
    
}

uj5u.com熱心網友回復：

擺脫了花車，并添加justify-content: space-between和width到.Navbar

uj5u.com熱心網友回復：

你可以通過使用 CSS flex-box 來做到這一點。您可以將父容器設定為flex，然后margin-left: auto將其提供給要向右推送的子容器。注意 - 要使其正常作業，父容器需要flex-wrap和flex-direction屬性。這樣無論容器的寬度如何，它都會被推到右邊。請參閱下面的代碼片段：

.Navbar {
  height: 80px;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 30px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.logo {
  font-family: 'Andada Pro', serif;
  color: orangered;
  font-weight: bolder;
}

.Navbar_icons {
  margin-left: auto;
  display: flex;
}

.Search,
.Help,
.Sign_In {
  display: flex;
  margin-right: 10px;
  text-align: center;
}

<div class="Navbar">
  <h1 class="logo">eat24/7</h1>
  <div class="Navbar_icons">

    <div class="Search">
      <SearchRoundedIcon />
      <p>Search</p>
    </div>


    <div class="Help">
      <HelpOutlineTwoToneIcon />
      <p>Help</p>
    </div>


    <div class="Sign_In">
      <PersonOutlineIcon />
      <p>Sign In</p>
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

使用 flexbox 時，您不需要浮動。事實上，除非您絕對確定沒有其他解決方案，否則永遠不要使用浮點數，如果不使用浮點數，世界將會崩潰。

你需要的是你的.Navbar選擇器中更多的 flexbox 設定，使它的子元素彼此遠離。justify-content正是這樣做的。你需要的是space-between它的價值。

如果你想探索更多的 flexbox，請參考這篇 flexbox 教程的杰作。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/330765.html

標籤：html css 反应

上一篇：如何在反應中將功能傳輸到功能組件

下一篇：使用JSX為陣列中的每個元素創建一個新的div元素？