如何对齐左侧的徽标和右侧的导航？

如何将徽标与我的导航栏对齐？

我的 HTML 代码是：

 <html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="icon" type="image/png" href="SENCOR_Logo.ico">
<title>SENCOR</title>
</head>
<body>
<div class="bg-div">
    <img class="logo-img" src="SENCOR_Logo.jpg" ALT="align box" ALIGN=CENTER>
    <nav>
        <ul>
            <li><a href="#">Monitoring</a></li>
            <li><a href="#">Process</a></li>
            <li><a href="#">Post and Create Email/Excel</a></li>
            <li><a href="#">Reports</a></li>
            <li><a href="#">Tools</a></li>
            <li><a href="#">Sales</a></li>
        </ul>
    </nav>
</div>
</body>
</html>

这是我的 style.css 代码：

 body{
    margin: 0;
    padding: 0;
    font-size: 15px;
}

/* Navigation */
nav{
    margin: 0;
    overflow:hidden;
    text-align: center;
}

nav ul{
    margin: 0;
    padding: 0;
}

nav ul li{
    display: inline-block;
    list-style-type: none;
}

nav > ul > li > a{
    color: #aaa;
    display: block;
    line-height: 2em;
    padding: 0.5em 1em;
    text-decoration: none;
}
-----------
.logo-img{
    position: relative;
    margin: 10px 15px 15px 10px;
}
.bg-div{
    background:#333;
}

我想在左侧显示徽标，在右侧显示导航栏。

原文由 ms.tery 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 272

* { text-decoration: none; list-style-type:none; color: white } .bg-div { background-color: #333; display: flex; justify-content: space-between; } nav ul { display: flex; } nav ul li{ margin: 0 12px; }

.logo-img{ position: fixed; margin: 10px 15px 15px 10px; left: 0; display:inline; } .bg-div{ background:#333; height: 50px; } .bg-div nav { position: fixed; display:inline; right: 0; }

如何对齐左侧的徽标和右侧的导航？

你尚未登录，登录后可以

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

如何实现类似豆包的AI改写框跟随内容滚动效果？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

如何在Ant Design表格中同时设置scroll.x和scroll.y且表头不换行？

Stack Overflow 翻译