Question

我正在尝试创建一个导航栏，该导航栏的png链接到左上角，文本元素“菜单”到右上角。我还无法将其与“ float：right;”一起使用。

我已经包含了显示我使用float的代码： .topnav元素。我不确定.logo是否会干扰这一点。我需要将png徽标与text元素对齐，如果不将其放在单独的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>

当徽标应位于右侧的对角时，文字仍保留在徽标旁边。

Answer 1

在container类中，执行position: absolute而不是position: flex。它将解决问题。

Answer 2

由于您希望导航栏具有左对齐的png链接和右对齐的文本，因此可以使用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>

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

2 个答案: