Html 图像位于ul导航栏中_Html_Video_Styles

Html 图像位于ul导航栏中

html video

Html 图像位于ul导航栏中,html,video,styles,Html,Video,Styles,我对编程有点陌生，我正在做一个学校项目，我从w3schools一步一步地制作了一个“ul导航栏”，然后我试着在页面上放一个视频，但视频把我的导航栏搞乱了，有没有办法修复导航栏的底部，这样当我放img或视频时就不会这样做了？谢谢大家! 代码：正文{页边距：0；} h1{ 字体系列：“漫画无MS”，草书，无衬线； } 李{ 字体系列：“漫画无MS”，草书，无衬线； } 保险商实验室{ 列表样式类型：无；边际：0px；填充：0px；溢出：自动；背景色：#7092be；位置：粘性

我对编程有点陌生，我正在做一个学校项目，我从w3schools一步一步地制作了一个“ul导航栏”，然后我试着在页面上放一个视频，但视频把我的导航栏搞乱了，有没有办法修复导航栏的底部，这样当我放img或视频时就不会这样做了？谢谢大家!

代码：


正文{页边距：0；}
h1{
字体系列：“漫画无MS”，草书，无衬线；
}
李{
字体系列：“漫画无MS”，草书，无衬线；
}    
保险商实验室{
列表样式类型：无；
边际：0px；
填充：0px；
溢出：自动；
背景色：#7092be；
位置：粘性；
顶部：75px；
宽度：100%；
}
李{
浮动：左；
}
李{
右边框：1px实心#bbb；
}
李：最后一个孩子{
边界权：无；
}
李阿{
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
李娜：停下来{
背景色：#496fa0；
}
.主动{
背景色：#bdcce1；
}
.center{margin:0width:480px；}
维蒂皮纳登酒店






您的浏览器不支持视频标记。

这是这一页

在上次

之后，您还没有关闭您的

ul

标签。我已经为您整理了代码并解决了问题。您刚刚忘记关闭

ul

标记，您需要关闭标记以显示新的块级元素，除非您决定让它使用

display flex

，否则您还可以指定您的DIV名称并为页面的每个部分创建一个新的DIV以强制使用块级元素

正文{
保证金：0；
}
h1{
字体系列：“漫画无MS”，草书，无衬线；
}
李{
字体系列：“漫画无MS”，草书，无衬线；
}
保险商实验室{
列表样式类型：无；
边际：0px；
填充：0px；
溢出：自动；
背景色：#7092be；
位置：粘性；
顶部：75px；
宽度：100%；
}
李{
浮动：左；
}
李{
右边框：1px实心#bbb；
}
李：最后一个孩子{
边界权：无；
}
李阿{
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
李娜：停下来{
背景色：#496fa0；
}
.主动{
背景色：#bdcce1；
}
.中心{
边距：0宽度：480px；
}


页面标题
维蒂皮纳登酒店







您的浏览器不支持视频标记。

非常感谢，这是如此明显，但我没有注意到，有时我真的觉得自己很傻。非常感谢。

<!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>