如何仅使用 css 和 html 将图像添加到固定导航栏答案

【问题标题】：How to add image onto fixed nav bar using only css and html如何仅使用 css 和 html 将图像添加到固定导航栏
【发布时间】：2020-02-25 10:15:40
【问题描述】：

我正在尝试使用导航栏容器内的图像创建一个固定的导航栏（仅 css 和 html）。我希望图像位于左上角，其余导航栏项目位于右上角。我想知道仅使用 flex 是否有可能？

谢谢！

以下是我目前所拥有的。

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test Document</title>
</head>
<body>
    <header>
        <nav class = "fixed-nav">
            <img src="https://upload.wikimedia.org/wikipedia/en/thumb/a/a4/Flag_of_the_United_States.svg/1920px-Flag_of_the_United_States.svg.png" alt="">
            <ul>
                <li><a href="#">Test1</a></li>
                <li><a href="#">Test2</a></li>
                <li><a href="#">Test3</a></li>
                <li><a href="#">Test4</a></li>
                <li><a href="#">Test5</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

CSS:

html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

header{
    margin:0 auto;
}

header img {
    height:70px;
}

.fixed-nav {
    position: fixed;
    display: flex;
    /* align-items: flex-end; */
    /* justify-content: flex-end; */
    top: 0;
    left: 0;
    width: 100%;
    /* height: 50px; */
    background-color: white;
  }

  nav ul{
    display:flex;
    margin:0;
  }

  nav ul li {
    list-style: none;
    padding: 20px;
    font-size: 1.5em;
    display:block;
  }

这是jsfiddle的链接

【问题讨论】：

标签： html css flexbox

【解决方案1】：

非常接近，只需将justify-content: 更改为space-between;。

【讨论】：

哇哦，对不起，我犯了这么愚蠢的错误，谢谢你的回答。