时间戳

首页 > 解决方案 > CSS - 将 flex 兄弟姐妹放置在彼此旁边

html - CSS - 将 flex 兄弟姐妹放置在彼此旁边

问题描述

我正在为我正在开发的个人网络应用程序构建我的第一个 html 页面。该页面有一个导航栏位于使用标签的一侧。我正在尝试将页面内容定位在导航栏旁边，但内容未显示。我的代码如下所示。有人告诉我使用 flex-inline 将导航栏和内容放在一起，但它仍然不起作用。只有导航栏显示。如果我注释掉<header>并添加float: right到#dashboard-content，内容显示在正确的位置。我只是无法同时正确显示导航栏和内容。任何帮助将不胜感激。

* {
    font-family: Verdana, Georgia, sans-serif;
}

html {
    width: 100%;
    height: 100%;
    margin: 0%;
    padding: 0%;
}

body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0%;
    padding: 0%;
    background-color: #121212;
}

/*====================       Navbar       ====================*/
.navbar {
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: start;
    width: 15%;
    height: 100%;
    padding: 20px;
    background-color: #1f1f1f;
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
}

.navbar-btn {
    display: block;
    width: 90%;
    margin: 5%;
    padding: 10px;
    background-color: #292929;
    border-style: solid;
    border-width: 1px;
    border-radius: 7px;
    border-color: #292929;
    text-decoration: none;
    text-align: center;
    color: #9966CC;
}
.navbar-btn:hover {
    background-color: #1f1f1f;
    border-color: #9966CC;
    transition: 0.4s;
}
.navbar-btn:active {
    background-color: #9966CC;
    border-color: #9966CC;
    color: #1f1f1f;
}

/*====================     Dashboard      ====================*/
#dashboard-content {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 85%;
    height: 100%;
}
<!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>Dashboard</title>
    <link rel="stylesheet" href="../static/css/style.css">
    <link rel="stylesheet" href="../static/fontawesome/css/all.css">
</head>
<body>
    <header class="navbar">
        <a href="" class="navbar-btn">Dashboard</a>
        <a href="" class="navbar-btn">New Transaction</a>
        <a href="" class="navbar-btn">Transactions</a>
        <a href="" class="navbar-btn">Settings</a>
    </header>
    <main id="dashboard-content">
        
    </main>
</body>
</html>

标签： htmlcssflexbox

解决方案

您可以将它们全部放入div标签中并display: flex在div

像这样的东西

* {
    font-family: Verdana, Georgia, sans-serif;
}
html {
    width: 100%;
    height: 100%;
    margin: 0%;
    padding: 0%;
}

body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0%;
    padding: 0%;
    background-color: #121212;
}
div{
  height : 100%;
  width : 100%;
  display:flex;
}
/*====================       Navbar       ====================*/
.navbar {
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: start;
    width: 15%;
    height: 100%;
    padding: 20px;
    background-color: #1f1f1f;
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
}

.navbar-btn {
    display: block;
    width: 90%;
    margin: 5%;
    padding: 10px;
    background-color: #292929;
    border-style: solid;
    border-width: 1px;
    border-radius: 7px;
    border-color: #292929;
    text-decoration: none;
    text-align: center;
    color: #9966CC;
}
.navbar-btn:hover {
    background-color: #1f1f1f;
    border-color: #9966CC;
    transition: 0.4s;
}
.navbar-btn:active {
    background-color: #9966CC;
    border-color: #9966CC;
    color: #1f1f1f;
}

/*====================     Dashboard      ====================*/
#dashboard-content {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 85%;
    height: 100%;
    background-color: red;
}
<!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>Dashboard</title>
    <link rel="stylesheet" href="../static/css/style.css">
    <link rel="stylesheet" href="../static/fontawesome/css/all.css">
</head>
<body>
  <div>
    <header class="navbar">
        <a href="" class="navbar-btn">Dashboard</a>
        <a href="" class="navbar-btn">New Transaction</a>
        <a href="" class="navbar-btn">Transactions</a>
        <a href="" class="navbar-btn">Settings</a>
    </header>
    <main id="dashboard-content">
        
    </main>
  </div>
</body>
</html>

推荐阅读