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

我需要一个带有五个预制图像的水平导航栏作为链接。图像高度相同但宽度不完全相同，所以我需要能够微调每个图像的水平位置和它们之间的间距，我不希望它们只是集中在左侧或右侧或居中。具有5个图像的水平导航栏，CSS

我怎么会去让这个在CSS？我搜查了一下，据我了解，这对初学者来说是相当困难的。多个水平divs？显示：表？

2015-01-09 roxunr

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

这是我编u可以使用，而不是文本图像，并可以设置宽度和高度

来源

2015-01-09 23:12:13 Mobitips

使用这个网站：

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

你会摆脱子弹点。

来源

2015-01-10 20:17:27 Jana

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

回答

相关问题