如何将图像标志放在导航栏的最左侧？答案

【问题标题】：How to put image logo on the leftmost part of the Nav bar?如何将图像标志放在导航栏的最左侧？
【发布时间】：2021-05-09 16:14:10
【问题描述】：

我目前正在为一个测试网页创建一个导航栏，但我无法对齐作为图像的网站徽标。我是 CSS 的初学者，所以有人可以给我一些关于如何排列徽标的提示。

附：此代码尚未完成，所以不要介意列表部分只是徽标部分

谢谢！！

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Header Footer — Kayelah Sews</title>
        <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
    </head>
    <body>
        <nav>
            <ul>
                <div id="logo"><img src="Logo.jpg" alt="Logo"></a>
                </div>
                <div class ="items">
                    <li><a href="home.jsp">Home</a></li>
                    <li><a href="collections.jsp">Collections</a></li>
                    <li><a href="aboutMe.jsp">About Me</a></li>
                    
                </div>
                <li class="search-icon">
                    <input type ="search" placeholder="Search Products">
                    <span class="fas fa-search"></span>
                </li>    
                <li><a href="account.jsp">Account</a></li>
                <li><a href="cart.jsp">Cart</a></li>
            </ul>
        </nav>
    </body>

 <style>
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
     
     *{
        margin: 0;
        padding: 0;
        color: black;
        box-sizing: border-box;
        font-family: 'Open Sans', sans-serif;
     }
     
     #logo{
        flex-basis: 20%;
        font-size: 0;
     }
     #logo img{
        height: auto;
        width: auto;
        max-height: 40%;
        max-width: 40%;
        overflow: hidden;
     }
     nav{
        background: white;
        padding: 10px 40px 10px 70px;
        border: 1px solid #B0B1AE;
        border-left: none;
        border-right: none;
        
     }
     nav ul{
         display: flex;
         list-style: wrap;
         align-items: center;
         justify-content: center;
     }
    
     
 </style>
    
</html>

【问题讨论】：

你不应该在<div>里面有<ul>

标签： javascript html css navbar

【解决方案1】：

你可以试试这个方法。您必须更改 nav 和 nav ul 上的两个 CSS 属性。

更改后nav:

 nav{
    background: white;
    padding: 10px 40px 10px 0;
    border: 1px solid #B0B1AE;
    border-left: none;
    border-right: none;
 }

这里的左侧填充覆盖了您代码左侧的 70 像素。我做到了 0。

和nav ul:

nav ul{
     display: flex;
     list-style: wrap;
     align-items: center;
 }

删除了justify-content 以将元素放在最左边的位置。

【讨论】：

【解决方案2】：

我在您的 nav div css 选择器中删除了 justify-content: center;，因此您的图像实际上可以在右侧。或者你可以使用position: absolute;。

这是最终代码：

*{
  margin: 0;
  padding: 0;
  color: black;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}

nav{
  background: white;
  padding: 10px 40px 10px 70px;
  border: 1px solid #B0B1AE;
  border-left: none;
  border-right: none;

}
nav ul{
   display: flex;
   list-style: wrap;
   align-items: center;
   /*justify-content: center;*/
}

#logo{
  flex-basis: 20%;
  font-size: 0;
}
#logo img{
  height: auto;
  width: auto;
  max-width: 40%;
  overflow: hidden;
}

<body>
    <nav>
        <ul>
            <div id="logo">
                <img src="https://placekitten.com/200/300" alt="Logo">
            </div>
            <div class ="items">
                <li><a href="home.jsp">Home</a></li>
                <li><a href="collections.jsp">Collections</a></li>
                <li><a href="aboutMe.jsp">About Me</a></li>

            </div>
            <li class="search-icon">
                <input type ="search" placeholder="Search Products">
                <span class="fas fa-search"></span>
            </li>    
            <li><a href="account.jsp">Account</a></li>
            <li><a href="cart.jsp">Cart</a></li>
        </ul>
    </nav>
</body>

【讨论】：

<ul> 在哪里？
删除它，使其水平对齐。让我再补充一下