我怎樣才能使這個登錄按鈕與其他東西在一條線上？

這是導航欄的影像 I。我想讓它居中

這是影像的html和css：

.login{
    flex-direction: row;
    margin: 24px 0 12px 0;
    display: flex;
    height: 60%;
    justify-content: center;
    align-items: center;

        <!--LOGIN-->
        <div class="Login">

            <img src="C:\Users\przem\Projekty\strona-task\img\login.png" alt="Avatar" class="avatar">
        
        </div>

這是我的第一個專案之一，我還是初學者，所以請解釋一下，就像我可能是 5 歲一樣。

*{
    margin: 0;
    
    font-family: 'Roboto', sans-serif;
}


.base{
    width: 100vw;
    height: 100vh;
    background: linear-gradient(311.76deg, #D4E7FE -15.24%, #FFFFFF 78.85%);
    background-position:center;
    background-size:contain;
    box-sizing: border-box;

}
.navbar{
    position:fixed;
    background: linear-gradient(311.76deg, #D4E7FE -15.24%, #FFFFFF 78.85%);
    background-position:center;
    background-size:contain;
    color: black;
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 80px;
}
.linki ul{
    align-items: center;
    display: flex;
    justify-content: space-between;
}
.linki li{
    align-items: center;
    padding-left: 5%;
    display: flex;
    justify-content: space-between;

}
.logo{
    display: flex;
}
.ikonka{
    width: 30%;
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    
}
.ikonka h2{
    left: 35px; 
    width:fit-content;
    display: flex;

}
.linki{
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
}
ul#horizontal-list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    min-width: 300px;
    list-style:none;
    align-items: center;
    height: 100%;
}
form{
    width: 80px;
    height: 14px;
    display: flex;
    flex-direction: row;
    align-items:flex-end;
}
button {
    all: unset;
    cursor: pointer;
    max-width: 44px;
    max-height: 44px;
  }
.path1{
    max-width: 18px;
    max-height: 18px;
  }
  form {
    height: 60%;
    width: 200px;
    display: flex;
    flex-direction: row;
    border: 3px solid #f1f1f1;
  }
.search-button{
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.login{
    flex-direction: row;
    margin: 24px 0 12px 0;
    display: inline-flex;
    height: 60%;
    justify-content: center;
    align-items: center;
}

<div class=navbar>
    <div class="ikonka">
        <img src="C:\Users\przem\Projekty\strona-task\img\ikona.png" class="logo">
        <h2>Netbook</h2>
    </div>
      <div class="Linki">
        <!--LINKI-->
    <ul id="horizontal-list">
      <li><a style="text-decoration:none;color:#000000;" href="https://www.w3schools.com">Home</a></li>
      <li><a style="text-decoration:none;color:#aeaeae;" href="https://www.w3schools.com">Community</a></li>
      <li><a style="text-decoration:none;color:#aeaeae;" href="https://www.w3schools.com">Blog</a></li>
      <li><a style="text-decoration:none;color:#aeaeae;" href="https://www.w3schools.com">Events</a></li>
    </ul>
      </div>
      <!--wyszukiwanie-->
      <div class="search-button">
        <form id="form"> 
          <button><img class="path1" src="C:\Users\przem\Projekty\strona-task\img\1024px-Search_Icon.svg.png"></img></button>
          <input type="search" id="query" name="q" placeholder="Search...">
        </form>
      </div>
        <!--LOGIN-->
        <div class="Login">

            <img src="C:\Users\przem\Projekty\strona-task\img\login.png" alt="Avatar" class="avatar">
        
        </div>
  </div>

uj5u.com熱心網友回復：

div 的類名是您在 CSS 檔案中Login撰寫的。login只是改變了它，它會作業

標籤：html验证

上一篇：使用Django獨立提交兩個帶有ajax的表單

下一篇：懸停后反轉影片時遇到問題