gpt4 book ai didi

css - 使图像在导航栏中居中,同时保持 100% 导航栏宽度

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

我试图将我的图像置于两个 UL 标签之间,但它没有按我希望的那样运行。我尝试了来自该网站的各种来源,但找不到专门针对这一问题的答案。

* {
margin: 0;
}
body {
background-color: #FFD4DB;
}
#navbar {
height: 55px;
width: 80%;
top: 5px;
position: absolute;
left: 10%;
right: 10%;
border-radius: 2px;
color: #FF405E;
text-align: center;
border-bottom: 3px solid #9B5E68;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff9baa+31,ffadae+93 */
background: #ff9baa;
/* Old browsers */
background: -moz-linear-gradient(top, #ff9baa 31%, #ffadae 93%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #ff9baa 31%, #ffadae 93%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ff9baa 31%, #ffadae 93%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff9baa', endColorstr='#ffadae', GradientType=0);
/* IE6-9 */
}
#navbar > ul li {
list-style-type: none;
display: inline;
margin-left: 10px;
}
#navbar > ul > li > a {
text-decoration: none;
line-height: 55px;
color: #9B5E68;
}
#lgo {
width: 100px;
height: 100px;
}
<body>
<nav id="navbar">
<ul>
<li><a href="#">Ipsum</a>
</li>
<li><a href="#">Lorem</a>
</li>
<li><a href="#">Ipsum</a>
</li>
</ul>
<img id="lgo" src="http://i.imgur.com/niYdlBv.png">
<ul>
<li><a href="#">Lorem</a>
</li>
<li><a href="#">Ipsum</a>
</li>
<li><a href="#">Lorem</a>
</li>
</ul>

最佳答案

我为你准备好了!

我为所有 ul 添加了属性。

#navbar ul {
display: inline-block;
position: relative;
padding: 0px 10px;
}

然后我在 HTML 文件中做了一些改动。在图片所在的中间,粘贴:

<ul>
<img id="lgo" src="http://i.imgur.com/niYdlBv.png">
</ul>

是的,现在将其添加到#lgo:

#lgo {
height: 55px;
vertical-align: middle;
}

希望能帮到你!

Here's the Pen!

关于css - 使图像在导航栏中居中,同时保持 100% 导航栏宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36140206/

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