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>

我让它在某一点工作，但我无法弄清楚为什么它不会成为内联，然后其他时候它会与我在它之后放置的Header结合起来。让我知道是否有更好的方法来做到这一点。到目前为止，我自学了我正在做的事情。

谢谢！

Answer 1

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

我已将您的代码放在一个小提示中以显示结果。

Inline Nav Bar

Answer 2

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

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

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

希望这有帮助！我也是自学成才，对事物来说很崭新。

导航栏HTML不是内联的

2 个答案: