时间戳

首页 > 解决方案 > 如何仅使用 css 和 html 将图像添加到固定导航栏

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

问题描述

我正在尝试使用导航栏容器内的图像创建一个固定的导航栏（仅 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的链接

标签： htmlcssflexbox

解决方案

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

推荐阅读