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

【问题标题】：how to align image and label side by side in html?如何在html中并排对齐图像和标签？
【发布时间】：2020-09-29 01:27:42
【问题描述】：

我希望我的徽标在左侧，导航栏在右侧。我在导航类之外尝试了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>

【问题讨论】：

更新 text-align 和 background-position 并添加 display: grid;网格模板列：重复（3，最大内容）1fr；

标签： html css

【解决方案1】：

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

在这段代码中，我创建了一个新的 <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>

【讨论】：

@JeetViramgame 我很高兴听到我的解决方案对您有用，并感谢您接受和支持我的回答，这对我来说意义重大。希望能有更多的机会帮助你。
让我们在社交媒体上联系。在推特上搜索 jeetviramgama。并欢迎您。
@JeetViramgame 对不起，我不使用 twitter，但我们可以在 github 上连接。检查我的个人资料以获取我的 github 用户名。我很乐意与您合作开展一些项目。

【解决方案2】：

只需使用float 对齐内容left 或right

.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>

【讨论】：

【解决方案3】：

这是一个很好的解决方案。我认为复选框（#toggle）将默认隐藏。

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

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid lightgray;
    text-align: right;
    line-height: 70px;
    height: 70px;
}

.nav label {
  margin-right: auto;
}

#toggle {
  display: none;
}

<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>

【讨论】：