如何使我的彈性盒 go 在同一行（相互對齊）

Question

我正在嘗試使兩個彈性框（每個都在它們自己的彈性容器中）位於同一行（以便它們水平對齊/共線。）我嘗試將以下屬性添加到所有彈性項目中：

flex-direction: row;

，但顯然它不起作用。

抱歉這個菜鳥問題，我是新手，我發現的其他解決方案不起作用。 這是我的代碼的 rest：

HTML：

<!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>Odin Landing Page</title>
</head>

<link rel = "stylesheet" href = "./styles.css">

<body>
    <div class = "headercontainer">
        <img src = "./images/boat.png" alt = "canoe logo" width = "48px" height= "auto" class = "circlephoto">
        <h1 class = "headerlogotext">Canoe</h1>
    </div>
</body>
</html>

CSS：

* {
    margin: 0;
    padding: 0;
    }

.headercontainer {
    background-color: #EDEDEE;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
}

.headerlogotext {
    display: flex;
    font-size: 24px;
    font-weight: bolder;
    color: #ff9248;
    font-family: Arial, Helvetica, sans-serif;
    flex-direction: row;
}

.link {
    display: flex;
    font-size: 18px;
    font-weight: lighter;
    color: #ffb38a;
    font-family: Arial, Helvetica, sans-serif;
    flex-direction: row;
}

Answer 1

您在.headercontainer中缺少display: flex 。 需要 flex 屬性來分配其子級的是父級。

如何使我的彈性盒 go 在同一行（相互對齊）

問題描述

1 個解決方案

解決方案1
0 2022-08-05 07:23:41

如何使我的彈性盒 go 在同一行（相互對齊）

問題描述

1 個解決方案

解決方案1 0 2022-08-05 07:23:41

解決方案1
0 2022-08-05 07:23:41