导航栏 HTML 不是内联的

Question

人们问的关于这个话题的所有问题都太复杂了，据我所知。我正在尝试制作一个基本的导航栏，以便我可以习惯 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>

我让它在某一时刻工作，但我不明白为什么它不会变成内联，然后其他时候它会与我放在它后面的页眉结合。让我知道是否有更好的方法可以简单地做到这一点。到目前为止，我是自学的。

谢谢！

Answer 1

由于您将 a 元素设为 display:block，它会覆盖 li 元素的内联属性。

我已将您的代码放入 fiddle 中以显示结果。

Inline Nav Bar

Answer 2

删除 Display:Block 部分，所有内容都将移至内联，因为您已将所有 li 元素设置为内联。

要将您的链接样式设置为按钮，请将以下内容添加到您的 CSS

ul a {
 padding: 20px;
 border-radius: 10px;
 text-decoration: none;
}

希望对您有所帮助！我也是自学成才，对事物很陌生。

导航栏 HTML 不是内联的

Navigation Bar HTML not inline

html

navigationbar