并非所有链接都有效

Question

我正在编写网站代码，我注意到在导航栏中，有些 link 有效，有些无效。

我已经意识到 link 这个词的组有不同的 css 代码，如果我删除它，那么其他的将起作用，但其他的当然不会出现。我尝试了很多东西，但似乎没有任何效果。

我想要的是一组 links 在栏的左边，其余的在右边，当然所有这些都可以工作，这是我的代码：

<!-- Create navigation bar-->
        <style>
            #TopBar{
   position:fixed;
   top:0;
   left:0;
   width:100%;
   height:40px;
   background-color:#181818;
}
            </style>         
            <div id="TopBar"></div>     
        <!-- Create Page Links -->
        <style>
        ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    color: white; 
    position: absolute; 
    font-family: sans-serif;        
    font-size: 20px;
    padding-left: 163px;      
}
        </style>
        <style>
        al {
    list-style-type: none;
    margin: 0;
    padding: 0;
    color: white; 
    position: absolute; 
    font-family: sans-serif;
    font-size: 20px;
    padding-left: 1028px;
        }
        </style>
<style>
        li {
    display: inline;
    margin: 5px;        
}
        </style>
        <style>
            a{color: #ffffff;
            text-decoration:none;   
            }
        </style>
        <ul>
  <li><a href="default.asp">Cos'è</a></li>
  <li><a href="news.asp">Chi Siamo</a></li>
</ul>
        <al>
            <li><a href="">News</a></li>
            <li><a href="">Video</a></li>
            <li><a href="">Gallery</a></li>
        </al>

希望有人能尽快帮我解决这个问题。

Answer 1

<al> 不是 HTML 元素，这就是它未在浏览器中显示的原因。也许你的意思是 <ul> 或 <ol>

Answer 2

把你的CSS改成这个，

al {
  list-style-type: none;
  margin: 0;
  padding: 0;
  color: white;
  position: absolute;
  font-family: sans-serif;
  font-size: 20px;
  right: 0;
}

如您所见，padding-left:1028px; 已替换为 right:0;。因为它导致左侧链接重叠。这就是无法点击的原因。

Answer 3

伙计。你的代码搞砸了。尽量避免在 html 文件中使用多种样式。一到三个可能没问题。但是在那之后你绝对应该使用一个外部样式表文件——当你计划发布你的代码时实际上就是这种情况。因此，如果这是为了测试，请尝试使用这种布局——它也便于稍后复制和粘贴。

-------
Head
- meta's
- style
-------
Body
-------

那么正如这里有些人已经提到的，<al> 不是有效的 HTML 标签。我猜你的意思是 <ul>.

您的链接 'news' 等将无法使用，因为 href="" 是空的，您必须添加一些内容。例如，如果您的新闻 HTML 与您可以使用的文件夹相同

<a href="news.html">News</a>

如果你想要你的第二个 ul（无序列表）具有不同的属性，你应该添加类和 ids——不幸的是，大多数人从来没有这样做过。在这种情况下，您应该使用一个 id。首先尝试通过 w3school 等网站自行学习。如果您仍然需要帮助，请向我们展示一些代码，我们会帮助您，但实际上非常简单。

并非所有链接都有效

Not all links work

html

css

hyperlink

navigationbar