Question

我有一个导航栏，该导航栏已使用弹性框进行样式设置。我有两个<ul>元素，并且它们之间有一个徽标（图像）（我只是在线使用了一些图片作为示例）。当我尝试以某种方式以某种方式更改图像的高度时，什么也没有发生。图像的父级是<nav>元素，因此图像高度的值不应该相对于nav吗？

这是与我在下面嵌入的代码相同的一个代码笔：enter link description here

* { 
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html, 
body {
    background-color: #fff;
    color: #555; 
}

/* Navigation */
nav {
    display: flex;
    border: 2px solid green;
}

nav img {
    width: 25%;
    height: 50%;
}

.main-nav-left {
    flex-basis: 30%;
    list-style: none;
    display: flex;
    justify-content: space-between;
}

.main-nav-right {
    flex-basis: 30%;
    list-style: none;
    display: flex;
    justify-content: space-between;
    margin-left: auto;
}

<html>
    <body class="home-page-body">
        <header>
            <nav>
                <ul class="main-nav-left">
                    <li>Home</li>
                    <li>Drinks</li>
                    <li>Food</li>
                </ul>
              
                <img src="https://cdn.pixabay.com/photo/2018/01/09/15/43/auto-3071895_1280.png" />

                <ul class="main-nav-right">
                    <li>Catering</li>
                    <li>Events</li>
                    <li>Contact Us</li>
                </ul>
            </nav>
        </header>
    </body>
</html>

Answer 1

您应该为图片的父级设置高度

.nav{
height:200px;
}

按百分比更改图像高度不起作用

1 个答案: