Question

如何制作水平导航栏？我希望所有图像（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>

Answer 1

添加

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

Answer 2

.navbar li {float: left;}

请注意，ul.navbar的宽度应足够宽，以使图像水平放置。

如何制作水平导航栏？

2 个答案: