css 如何在更改大小时将徽标与导航栏对齐

aurhwmvo 于 2022-12-15 发布在其他

关注(0)|答案(1)|浏览(102)

我是一个超级新手，所以请与我裸。我只是试验html和css，但不能让我的标志，以符合导航栏的文字。大小，它是在现在是超级小，但它是最接近的是在正确的位置。任何其他大小，它跳下从导航栏。
我给logo指定了绝对位置，因为无论何时我改变了它的大小，它也会影响导航栏的大小。所以这就阻止了它的发生。我还从id头中移走了logo，并将它 Package 在一个div中。不确定这是否会给我带来额外的问题？
先谢谢你
'

<body>

        <div class="logo">
        <a href="#"><img src="./imgs/logo.png" alt=""></a>
        </div>

        <section id="header">

        <div>
            <ul id="navbar">
                <li><a class="active" href="index.html">Home</a></li>
                <li><a href="shopvhs.html">Shop VHS</a></li>
                <li><a href="shopcassette.html">Shop Cassettes</a></li>
                <li><a href="games.html">Shop Games</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="about.html">About us</a></li>
                <li><a href="cart.html"><i class="fa-solid fa-basket-shopping"></i></a></li>
            </ul>
        </div>
    </section>
    
</body>

'
'

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


h3, h2, p {
    font-size: 16px;
    line-height: 30px;
    color: white;
}

img {
    height: 200px;
}

body {
    width: 100%;
}

/* Header  */

#header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 80px;
    box-shadow: 0 20px 15px rgba(0, 0, 0, 0.06);
}

.logo {

    position: absolute;
}

#navbar {
    display: flex;
    align-items: center;
    justify-content: center;
}

#navbar li {
    list-style: none;
    padding: 0 20px;
}

#navbar li a {
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    color: #71CFE7;
    transition: 0.3s ease;
}

#navbar li a:hover,
#navbar li a.active {
    color: white;
}

'

css

来源：https://stackoverflow.com/questions/74792160/how-to-align-logo-with-navbar-when-changing-size

1条答案

按热度按时间

flmtquvp1#

使用语义标签，如标题和导航，它更好的解决方案。
对于标志，你需要 Package 大小（作为< a >）和图像样式（宽度，高度，对象适合）。关于对象适合你可以在这里阅读：https://developer.mozilla.org/ru/docs/Web/CSS/object-fit
我还增加了标题的间隙，它更喜欢，而不是填充/边距。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


h3, h2, p {
    font-size: 16px;
    line-height: 30px;
    color: white;
}

img {
    height: 200px;
}

body {
    width: 100%;
}

/* Header  */

header {
    display: flex;
    gap: 0 20px;
    align-items: center;
    justify-content: space-between;
    padding: 20px 80px;
    box-shadow: 0 20px 15px rgba(0, 0, 0, 0.06);
}

.logo {
  min-width: 100px;
  max-width: 100px;
  height: 40px;
}
.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#navbar {
    display: flex;
    align-items: center;
    justify-content: center;
}

#navbar li {
    list-style: none;
    padding: 0 20px;
}

#navbar li a {
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    color: #71CFE7;
    transition: 0.3s ease;
}

#navbar li a:hover,
#navbar li a.active {
    color: white;
}

<body>
        <header id="header">
<a class="logo" href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/640px-Image_created_with_a_mobile_phone.png" alt=""></a>
        <nav>
            <ul id="navbar">
                <li><a class="active" href="index.html">Home</a></li>
                <li><a href="shopvhs.html">Shop VHS</a></li>
                <li><a href="shopcassette.html">Shop Cassettes</a></li>
                <li><a href="games.html">Shop Games</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="about.html">About us</a></li>
                <li><a href="cart.html"><i class="fa-solid fa-basket-shopping"></i></a></li>
            </ul>
        </nav>
    </header>
    
</body>

赞(0）回复(0）举报 2022-12-15

我来回答

css 如何在更改大小时将徽标与导航栏对齐

1条答案

相关问题

热门标签

最新问答