带有 5 个图像的水平导航栏，CSS答案

【问题标题】：Horizontal nav bar with 5 images, CSS带有 5 个图像的水平导航栏，CSS
【发布时间】：2015-01-11 04:22:41
【问题描述】：

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

我将如何在 CSS 中实现这一点？我搜索了一下，据我了解，这对于初学者来说是一个相当困难的命令。多个水平div？显示：表格？

【问题讨论】：

标签： css

【解决方案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>

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

【讨论】：

【解决方案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;}

您将摆脱要点。

【讨论】：