標題導航位置

所以，我一直在為我的學校做一個專案，我想出了健身的想法（不重要）。我設定了徽標，當我開始實際導航時，我.. idk.. 所以我希望我的導航在右側對齊，但我嘗試的所有內容都沒有改變位置。有人幫忙嗎？這是實際的代碼

HTML

        <header>
        <div class="logo">
            <img src="./img/fit-logo.png" alt="logo" width="120" height="120">
        </div>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="index-about-us.html">About us</a></li>
                    <li><a href="index-trainings.html">Trainings</a></li>
                    <li><a href="index-news.html">News</a></li>
                    <li><a href="index-contact-us.html">Contact Us</a></li>
                </ul>
            </nav>
    </header>

CSS

*{
margin:0;
padding:0;
border:0;
}

::selection {
    background-color: lightcoral;
}

body {
    background-color: gray;
    width:100%;
    height:100%;
}

.flex {
    display:flex;
}

.logo {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    pointer-events: none;
    margin: 0 110px;
    float:left;
}

nav {
    align-items: center;
    justify-content: space-between;
}

uj5u.com熱心網友回復：

據我了解您的問題，您需要像這樣導航。對？

為此，您需要對 flexbox 有所了解。您可以參考這篇文章了解基本的 flexbox 知識。

W3Schools 的 CSS Flexbox。

這是您導航的代碼。

HTML

<header>
  <nav>
    <ul>
      <li class="logo"> <img src="./img/fit-logo.png" alt="logo" width="120" height="120"></li>
      <li><a href="#">Home</a></li>
      <li><a href="index-about-us.html">About us</a></li>
      <li><a href="index-trainings.html">Trainings</a></li>
      <li><a href="index-news.html">News</a></li>
      <li><a href="index-contact-us.html">Contact Us</a></li>
    </ul>
  </nav>
</header>

CSS

*{
margin:0;
padding:0;
border:0;
}
ul{
  list-style-type: none;
  display: flex;
  justify-content: right;
  background-color: #1F1D36;
}

.logo{
  flex:1;
}

li{
  float: left;
}

li a {
  display: block;
  text-align: center;
  padding: 16px;
  text-decoration: none;
  color: white;
  font-family: Poppins;
}

uj5u.com熱心網友回復：

您可以使用導航項來顯示行內。

*{
margin:0;
padding:0;
border:0;
}

::selection {
    background-color: lightcoral;
}

body {
    background-color: gray;
    width:100%;
    height:100%;
}

.flex {
    display:flex;
}

.logo {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    pointer-events: none;
    margin: 10px;
    float:left;
}

nav {
    align-items: center;
    justify-content: space-between;
}
nav ul li {
      display: inline;
      padding:10px;
      float:right
}

<header>
        <div class="logo">
            <img src="./img/fit-logo.png" alt="logo" width="120" height="120">
        </div>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="index-about-us.html">About us</a></li>
                    <li><a href="index-trainings.html">Trainings</a></li>
                    <li><a href="index-news.html">News</a></li>
                    <li><a href="index-contact-us.html">Contact Us</a></li>
                </ul>
            </nav>
    </header>

標籤：

上一篇：如何在大寫和小寫字母之間更改文本大小？

下一篇：Python腳本無法呼叫JiraRESTAPI