开发者

How do I make a horizontal navbar?

开发者 https://www.devze.com 2023-01-15 00:46 出处:网络
How do I make a horizontal navbar? I want all the images (demo4), to be in a horizontal line. <!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01//EN\">

How do I make a horizontal navbar? I want all the images (demo4), to be in a horizontal line.

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


.navbar li {float: left;}

Note that the width of ul.navbar should be wide enough for the images to sit horizontally.


add

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

精彩评论

暂无评论...
验证码 换一张
取 消