Question

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

我如何在CSS中制作它？我搜索过，据我所知，对初学者来说这是一个相当难的命令。多个水平div？显示：表

Answer 1

<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>

这就是我所说的你可以使用图像而不是文字，并可以设置宽度和高度

Answer 2

使用此html：

<nav>
<ul>
<li><a href="page to which image links to"> <img src="img/one.png" alt="" class="image"></a></li>

<li><a href="page to which image links to"> <img src="img/two.png" alt="" class="image"></a></li>

<li><a href="page to which image links to"> <img src="img/three.png" alt="" class="image"></a></li>

<li><a href="page to which image links to"> <img src="img/four.png" alt="" class="image"></a></li>

<li><a href="page to which image links to"> <img src="img/five.png" alt="" class="image"></a></li>

然后把它放到CSS中：

nav ul{list-style: none;}

你将摆脱要点。

水平导航栏有5个图像，CSS

2 个答案: