HTML 尽管使用模板代码，但导航栏不起作用

Question

我正在使用 phase-5 HTML-Editor 编写 HTML-Webside，我想制作一个水平导航栏。它仍然不起作用，尽管我已经在其中粘贴了其他程序员的代码，但它仍然显示为正常的垂直列表。这是 HTML-代码：

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <title>Webiste-Title</title>
 <link href="Style.css" type="text/css" rel="stylesheet">
 </head>
 <body>
 <div id="Headbanner">
 <h1>Welcome</h1>
 </div>

 <div style="border:1px solid blue;" >
 <ul id="navi" style="display:inline;list-style-type:none;min-width:720em
 width:size 600px;position:absolute;" >
 <li><a href="index.html">Home</a></li>
 <li><a href="news.html">News</a></li>
 <li><a href="contact.html">Contact</a></li>
 <li><a href="chronik.html">Chronik</a></li>
 </div>

 </body>
 </html>

导入的 CSS 除了 h1 的颜色变化外是空的。我还不能 post 图片，但它将所需的导航栏显示为垂直列表。

我查看了其他线程，但没有任何效果。感谢所有已经尝试提供帮助的人。

蒂姆·瓦尔布罗克

Answer 1

试试这个：

  HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

CSS
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}

Answer 2

这种风格可以解决您的问题

#navi li{
    display:inline;
    list-style-type:none;
    min-width:720em;
     width:600px;
    }

点击 fiddle :Fiddle

HTML 尽管使用模板代码，但导航栏不起作用

HTML Navigation bar doesn´t work although using template code

html

navigationbar