css - 如何在将图像徽标移动到最左侧时更改其宽度？

Question

我是 CSS 新手，一直在苦苦挣扎。基本上，我的导航栏上有一个图像标志，但它太大了，所以我添加了一个宽度和一个边距右：自动将它移动到最左边，同时将一个 flex-end 移动到标题。但是，如果我添加宽度，则对象不会移动。是否有任何解决方法不需要我在 Photoshop 中修改图像大小并再次保存？谢谢`

header{
    width:100%;
    height:13vh;
    display:flex;
    align-items:center;
    justify-content: flex-end;
    padding:30px 10%;
}

.logo{
    margin-right:auto;
    width:140px;
    cursor:pointer;

}


.nav-links li{
    display:inline-block;
    padding: 0px 20px;

}

<header>
    <a href="#">
        <img class="logo" src="images/favicon.png">

    </a>
    <nav>
        <ul class="nav-links">
            <li><a href="#">Home</a></li>
            <li><a href="#">Shipping</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact Us</a></li>

        </ul>
    </nav>
    <a class="cta" href="#">Get a Quote</a>
</header>

标签： css

Answer 1

您 acn 修改<a>包装的<img>宽度并将图像宽度设置为 100%

注意：标题周围有太多填充。如果不需要，您应该将其删除，并摆脱滚动条使用此box-sizing它非常有用。

尝试这个

header{
  width:100%;
  height:13vh;
  display:flex;
  align-items:center;
  justify-content: flex-end;
  padding:30px 10%;
}

header a.logo-link {
  width: 60px; /* I set it to 60px just make it look nice */
  margin-right: auto;
}

.logo{
  width:100%;
  cursor:pointer;
}

.nav-links li{
  display:inline-block;
  padding: 0px 20px;
}

<header>
        <a class="logo-link" href="#">
            <img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Mangekyou_Sharingan_Itachi.svg/768px-Mangekyou_Sharingan_Itachi.svg.png">
        </a>
        <nav>
            <ul class="nav-links">
                <li><a href="#">Home</a></li>
                <li><a href="#">Shipping</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact Us</a></li>
    
            </ul>
        </nav>
        <a class="cta" href="#">Get a Quote</a>
    </header>