如何将图像添加到导航菜单栏的左侧？

Question

如何获得与左侧导航栏和右侧列出的菜单项一致的图像？ 我一直将我的图像放在导航栏顶部的 go 而不是内联/导航栏上。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
<title>TLC Music Group</title>
<link rel="stylesheet" href="css/style.css">
<meta name="description" content="Our first page">
<meta name="keywords" content="html tutorial template">
</head>
<body>
    <nav>    
    <ul class="navigationbar">
        <li><img src="imgs/tlclogo.png" id=logo alt="TLC Logo" /> </li>
        <li><a href="index.html">Home</a></li>
        <li><a href="music.html">Music</a></li>
        <li><a href="news.html">News</a></li>
    </ul>        
    </nav>
</body>
</html>

  .navigationbar ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    text-align: center;
    float: left;
    vertical-align:top;
    top: 0;
    width: 100%;
    overflow: hidden;
    background-color: #333
  }

  #logo {
    float: left;
}

  li {
    float: right;
  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  /* Change the link color to #111 (black) on hover */
  li a:hover {
    background-color: #111;
  }

Answer 1

尝试使用display:flex; 这将使您的生活更轻松。 还将 img 标签放在HTML un-ordered list之外

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>TLC Music Group</title>
    <link rel="stylesheet" href="css/style.css" />
    <meta name="description" content="Our first page" />
    <meta name="keywords" content="html tutorial template" />
  </head>
  <body>
    <nav>
        <img src="imgs/tlclogo.png" id=logo alt="TLC Logo" />
      <ul class="navigationbar">
    
        <li><a href="index.html">Home</a></li>
        <li><a href="music.html">Music</a></li>
        <li><a href="news.html">News</a></li>
      </ul>
    </nav>
  </body>
</html>

和CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
ul li {
  position: relative;
  margin: 0 20px;
  list-style: none;
  display: inline-block;
  cursor: pointer;
}

我希望这能解决您的问题。

如何将图像添加到导航菜单栏的左侧？

问题描述

1 个解决方案

解决方案1
0 2022-03-31 08:03:47

如何将图像添加到导航菜单栏的左侧？

问题描述

1 个解决方案

解决方案1 0 2022-03-31 08:03:47

解决方案1
0 2022-03-31 08:03:47