导航栏HTML不内联

debugcn 发表于 Dev

泰勒颂55

人们对这个话题的所有疑问都比我所看到的要复杂。我正在尝试制作一个基本的导航栏，使我能够习惯HTML的工作方式。这是我的代码：

myFile.html：

<!DOCTYPE HTML>
<html>

<head>

</head>
<style>
ul  {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

li  {
        display: inline;
    }

a:link, a:visited {
      display: block;
      width: 120px;
      font-weight: bold;
      color: white;
      background-color: black;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      }

a:hover, a:active {
      background-color: dark-grey;
      } 

body {
      background-image: url("fallout man and dog.jpg");
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
    }



</style>

<body>


    <ul>

        <li><a href="file:///E:/HTML folders/Fallout4Test/myFile.html">HOME</a></li>
        <li><a href="file:///E:/HTML folders/Fallout4Test/Videos.html">VIDEOS</a></li>

    </ul>

  <h1>This is the Heading</h1>

</body>

</html>

<!-- file:///C:/Users/tylersong55/Desktop/myFile.html -->

Videos.html：

<!DOCTYPE HTML>
<html>

<head>

</head>

<style>
ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      }

li {
      display: inline;
      }


a:link, a:visited {
      display: block;
      width: 120px;
      font-weight: bold;
      color: white;
      background-color: black;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      }

a:hover, a:active {
      background-color: dark-grey;
      }

body {
      background-image: url("fallout man and dog.jpg");
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      }

h2 {
      background-color: black;
      color: white;

      }




</style>

<body>



    <ul>

        <li><a href="file:///E:/HTML folders/Fallout4Test/myFile.html">HOME</a></li>
        <li><a href="file:///E:/HTML folders/Fallout4Test/Videos.html">VIDEOS</a></li>

    </ul>

    <h2>Fallout 4 - Announcement Trailer</h2>

    <center><iframe width="560" height="315" src="https://www.youtube.com/embed/XW7Of3g2JME" 
  frameborder="0" allowfullscreen></iframe></center>

  <h2>Fallout 4 - The Wanderer Trailer</h2>

  <center><iframe width="560" height="315" src="https://www.youtube.com/embed/k3IlHBBGCIw" 
  frameborder="0" allowfullscreen></iframe></center>


</body>


</html>

我曾经在某一时刻使用它，但是我无法弄清楚为什么它不会变成内联，然后有时它将与我紧随其后的Header结合在一起。让我知道是否有更好的方法可以简单地做到这一点。到目前为止，我对自己的所作所为是自学的。

谢谢！

凯夫·冈萨雷斯

由于您将a元素设置为display:block，因此它会覆盖该li元素的inline属性。

我把您的代码放在小提琴中以显示结果。

内联导航栏

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。