如何制作水平导航栏？

如何制作水平导航栏？我想要所有的图像（demo4）都是水平线。如何制作水平导航栏？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html> 
<head> 
    <title>Sepia!</title> 

    <link rel="stylesheet" href="mystyle.css"> 
    <style type="text/css"> 


    body { 
    padding-top: 4em; 
    padding-left: 1em; 
    font-family: Arial ; 
    color: #414189; 
    text-align: center; 

    background-color: white} 

    #wrap { 
    width: 700px;    
    margin: 0 auto;   
    background-color: #0f0f0f} 

ul.navbar { 
    list-style-type: none; 

    padding: 0; 
    margin: 0; 
    position: inline; 
    top: 1em; 
    left: 1em; 
    width: 9em } 
h1 { 
    font-family: Arial } 
ul.navbar li { 
    background: #0f0f0f; 
    padding: 0.4em; 
    } 
    ul.navbar a { 
    text-decoration: none } 
    a:link { 
    color: #0f0f0f} 
    a:visited { 
    color: #0f0f0f} 
    address { 
    margin-top: 1em; 
    padding-top: 1em } 


    </style> 


</head> 

<body> 
<div id="wrap"> 
<!-- Site navigation menu --> 
<ul class="navbar"> 
    <li><img src="C:\Users\user\Pictures\Style\SepiaWeb\button_demo5.png" alt="Button 1" ></a> 
    <li><img src="C:\Users\user\Pictures\Style\SepiaWeb\button_demo4.png" alt="Button 1" ></a> 
    <li><img src="C:\Users\user\Pictures\Style\SepiaWeb\button_demo4.png" alt="Button 1" ></a> 
    <li><img src="C:\Users\user\Pictures\Style\SepiaWeb\button_demo4.png" alt="Button 1" ></a> 
    <li><img src="C:\Users\user\Pictures\Style\SepiaWeb\button_demo4.png" alt="Button 1" ></a> 
    <li><img src="C:\Users\user\Pictures\Style\SepiaWeb\button_demo4.png" alt="Button 1" ></a> 
</ul> 

<!-- Main content --> 

<p>para 1 

<p>para 2 




<address>Date<br> 
    Sepia </address> 
</div> 
</body> 
</html>

来源

2010-09-08 rectangletangle

.navbar li {float: left;}

注意的ul.navbar宽度应足够宽，图像在水平方向坐。

来源

2010-09-08 04:33:06 Ben

@ Anteater7171 - 这真的取决于你在做什么，但我认为'宽：100％'会做。 – Ben 2010-09-08 04:50:53

添加

.navbar,.navbar li 
{ 
    float:left; 
}

来源

2010-09-08 04:28:56

如何制作水平导航栏？

回答

相关问题