gpt4 book ai didi

css - 带有 5 个图像的水平导航栏,CSS

转载 作者:太空宇宙 更新时间:2023-11-04 12:28:08 25 4
gpt4 key购买 nike

我需要一个水平导航栏,其中包含五个用作链接的预制图像。图片的高度相同但宽度不完全相同,所以我需要能够微调每个图片的水平位置和它们之间的间距,我不希望它们只是左右或中间集中在一起。

我的想法是这样的: http://i.imgur.com/3ZzKQhJ.jpg

我将如何在 CSS 中制作它?我搜索了一下,据我所知,这对初学者来说是一个相当困难的命令。多个水平div?显示:表?

最佳答案

<html>
<head>
</head>
<style type="text/css">
#images ul li{
display: inline;
}
#i1{
background-color:red;
margin:20px;
padding:10;

}
#i2{
background-color:red;
margin:20px;
padding:10;

}
#i3{
background-color:red;
margin:20px;
padding:50;

}
</style>

<body>

<div id="images">
<ul>
<li id="i1"> image1</li>
<li id="i2">image2</li>
<li id="i3">image3</li>
</ul>
</div>
</body>
</html>

这是我做的你可以使用图像而不是文本并且可以设置宽度和高度

关于css - 带有 5 个图像的水平导航栏,CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27870703/

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