gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 19:28:46 25 4
gpt4 key购买 nike

<分区>

我有一个导航栏,我使用 flex box 来设置样式。我有两个 <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>

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com