时间戳

首页 > 解决方案 > 如何在html中并排对齐图像和标签？

html - 如何在html中并排对齐图像和标签？

问题描述

看图

我希望我的徽标在左侧，导航栏在右侧。我在导航类之外尝试了img，它确实向左对齐，但我希望导航和我的徽标在一起。我该怎么做呢？谢谢你。

这是我的代码：

.img {
  text-align: left;
  background-position: left;
}

.nav {
  border-bottom: 1px solid lightgray;
  text-align: right;
  line-height: 70px;
  height: 70px;
}
<div class="nav">
  <img src="images/logo.png" alt="" height="40px" width="80px" style="margin-left: 5px; text-align: left;">
  <label for="toggle"> &#9776; </label>
  <input type="checkbox" id="toggle">
  <div class="menu">
    <a href="#">Home</a>
    <a href="#">Gallery</a>
    <a href="#">Contact</a>
    <a href="#">Share</a>
    <a href="#">Useless</a>
  </div>
</div>

标签： htmlcss

解决方案

尝试编写附加的代码，它肯定会工作，但如果它没有在评论中让我知道，我会尽力帮助你。

在这段代码中，我创建了一个新的<div>并添加float:left;到它，并删除了一些内联和内部 CSS。

您的代码没有完成工作，因为您向父 ( .nav) 元素和子 ( menu) 元素添加了相反的属性。

.img {
      float: left;
}
.nav {
    border-bottom: 1px solid lightgray;
    line-height: 70px;
    height: 70px;
}
.menu{
    float: right;
}
<!DOCTYPE html>
<html>
<head>
  <title>Nav</title>
</head>
<body>
<div class="nav">
  <div class="img">
        <img src="images/logo.png" alt="" height="40px" width="80px" style="margin-left: 5px;">
        <label for="toggle"> &#9776; </label>
        <input type="checkbox" id="toggle">
        </div>
        <div class="menu">
            <a href="#">Home</a>
            <a href="#">Gallery</a>
            <a href="#">Contact</a>
            <a href="#">Share</a>
            <a href="#">Useless</a>
        </div>
    </div>
</body>
</html>

推荐阅读