如何在导航栏中将文本元素向右浮动，png元素向左浮动答案

【问题标题】：How to float text element to right with png element to left in nav bar如何在导航栏中将文本元素向右浮动，png元素向左浮动
【发布时间】：2019-09-08 04:26:34
【问题描述】：

我正在尝试设置一个导航栏，左上角有一个 png 链接，右上角有一个文本元素“菜单”。我无法让它与“float：right;”一起使用

我已经包含了显示我使用浮点数的代码：对；对于 .topnav 元素。我不确定 .logo 是否会干扰这一点。我需要 png 徽标与文本元素对齐，如果不将它们放在单独的 div 中，这是不可能的。

.container {
  position: absolute;
  margin: 20px;
  width: auto;
}

.topnav {
  overflow: hidden;
  float: right;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
  font-size: 17px;
}

.topnav_right {
  float: right;
}

.logo {
  float: left;
}

<div class="container">
  <div class="logo">
    <a href="index.html"><img src="####.png" style="max-width:100%;"></a>
  </div>
  <div class="topnav">
    <div class="topnav_right">
      <a href="index.html">Menu</a>
    </div>
  </div>
</div>

文本仍然保留在徽标旁边，而它应该位于右侧的对角。

【问题讨论】：

喜欢这个？jsfiddle.net/jx7dznwm
是的 - 你做了什么改变来使它工作？

标签： html css

【解决方案1】：

在 container 类中，不要使用 position: absolute ，而是使用 position: flex 。它会解决问题。

【讨论】：

【解决方案2】：

由于您想要一个具有左对齐 png-link 和右对齐文本的导航栏，因此可以使用 flex-box 以更简单的方式实现，但需要嵌套它们。它还可以轻松处理对齐

您可以从csstricks阅读更多关于 flexbox 的信息

<style>
    .topnav {
        display:flex;
        justify-content:space-between;
        align-items:center;
    }
</style>
<div class="topnav">
    <div class="logo">
        <a href="index.html"><img   src="###.png"></a>
    </div>
    <div class="text">
        <a href="index.html">Menu</a>
    </div>
</div>

【讨论】：