图片在ul导航栏

Question

我对编程有点陌生，我正在做一个学校项目，我从 w3schools 一步一步制作了一个 "ul navigation bar" 然后我尝试在页面中放一个视频，但是视频有点搞砸了我的导航栏，任何想法如何固定导航栏的底部所以当我放img 或视频不会这样做吗？谢谢！

代码：

<!DOCTYPE html>
<html lang='cs'>
  <head>
    <style>
    body {margin:0;}
h1 {
 font-family: "Comic Sans MS", cursive, sans-serif;
}
li {
 font-family: "Comic Sans MS", cursive, sans-serif;
}    
ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  overflow: auto;
  background-color: #7092be;
  position: sticky;
  top: 75px;
  width: 100%;
}

li {
  float: left;
}
li {
  border-right: 1px solid #bbb;
}

li:last-child {
  border-right: none;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #496fa0;
  }
.active {
  background-color: #bdcce1;
}

.center { margin: 0width: 480px; }
</style>
    <title></title>
    <meta charset='utf-8'>
    <meta name='description' content=''>
    <meta name='keywords' content=''>
    <meta name='author' content=''>
    <meta name='robots' content='all'>

  </head>
    <body>
    <h1> Vtipy na den</h1>
     <ul>
  <li><a href="index.html">Domov</a></li>
  <li><a href="ctyri.html">Najdu co neznám</a></li>
  <li><a href="obrazky.html">Obrázky</a></li>
  <li><a class="active" href="videjko.html">Video vtip</a></li>
  <li><a href="tabulky.html">Tabulky</a></li>


     <div>   
        <video class='center' width="640" height="480" controls autoplay>
  <source src="vtip1.mp4" type="video/mp4">
  <source src="vtip1.mp4" type="video/ogg">
        Your browser does not support the video tag.
        </video>
        </div>

    </body>
</html>

这是页面

https://i.stack.imgur.com/35sSc.png

Answer 1

您在上次 </li>

之后还没有关闭您的 ul 标签

Answer 2

我已经为您整理了代码并解决了问题。你只是忘了关闭你的 ul 标签，你需要关闭标签才能显示新的块级元素，除非你决定使用 display flex，你也可以给你的 DIVs 名称并为页面的每个部分创建一个新的 DIV 以强制使用块级元素。

body {
  margin: 0;
}

h1 {
  font-family: "Comic Sans MS", cursive, sans-serif;
}

li {
  font-family: "Comic Sans MS", cursive, sans-serif;
}

ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  overflow: auto;
  background-color: #7092be;
  position: sticky;
  top: 75px;
  width: 100%;
}

li {
  float: left;
}

li {
  border-right: 1px solid #bbb;
}

li:last-child {
  border-right: none;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #496fa0;
}

.active {
  background-color: #bdcce1;
}

.center {
  margin: 0width: 480px;
}

<!DOCTYPE html>
<html lang='cs'>

<head>

    <title>Page title</title>
    <meta charset='utf-8'>
    <meta name='description' content=''>
    <meta name='keywords' content=''>
    <meta name='author' content=''>
    <meta name='robots' content='all'>

</head>

<body>
    <h1> Vtipy na den</h1>
    <ul>
        <li><a href="index.html">Domov</a></li>
        <li><a href="ctyri.html">Najdu co neznám</a></li>
        <li><a href="obrazky.html">Obrázky</a></li>
        <li><a class="active" href="videjko.html">Video vtip</a></li>
        <li><a href="tabulky.html">Tabulky</a></li>
    </ul>
        <div>
            <video class='center' width="640" height="480" controls autoplay>
                <source src="vtip1.mp4" type="video/mp4">
                <source src="vtip1.mp4" type="video/ogg"> Your browser does not support the video tag.
            </video>
        </div>

</body>

</html>

图片在ul导航栏

Image is in ul navigation bar

html

video

styles