简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
對齊元素內的多個項目：逐步指南
P粉946336138
P粉946336138 2024-04-01 23:21:40
0
2
374

我想在一個元素內對齊不同的項目！我嘗試給 Element 一個彈性盒並自行調整裡面的項目！但它沒有正確響應！列表項目應排成一行，左連結在左側，右連結在右側！徽標應位於中心！ 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Header</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="header">
      <div class="left-links">
        <ul>
          <li><a href="#">ONE</a></li>
          <li><a href="#">TWO</a></li>
          <li><a href="#">THREE</a></li>
        </ul>
      </div>
      <div class="logo">LOGO</div>
      <div class="right-links">
        <ul>
          <li><a href="#">FOUR</a></li>
          <li><a href="#">FIVE</a></li>
          <li><a href="#">SIX</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>
.header  {
  font-family: monospace;
  background: papayawhip;
  display: flex;
  align-items: center;
}

.logo {
  font-size: 48px;
  font-weight: 900;
  color: tomato;
  background: white;
  padding: 4px 32px;
}

ul {
  /* this removes the dots on the list items*/
  list-style-type: none;
}

a {
  font-size: 22px;
  background: white;
  padding: 8px;
  /* this removes the line under the links */
  text-decoration: none;
}

.header .left-links {
  display: flex;
  justify-content: flex-start; //I tried justify-items also, but it doesn't help!
  flex-direction: row;
}

.header .logo {
  display: flex;
  justify-content: center;
}

.header .right-links {
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
}

//我也嘗試了 justify-items，但沒有幫助！

P粉946336138
P粉946336138

全部回覆(2)
P粉276577460
P粉2765774602024-04-02 21:14:54 2樓

我想如果我理解正確的話， ul 是父級。將 display: flex 指派給它，因為它是父級。

點贊 +0
新增回覆
P粉231079976
P粉2310799762024-04-02 13:06:46 1樓

您需要將 Flex 屬性套用到 ul

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

要讓 Items 位於螢幕側面和標誌中心，只需將 header 設定為 justify-content: space- Between

這是您需要更改的完整清單

.header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！