Question

我正在学习html，css和web开发我正在尝试播放保存在我创建的html页面中的文件夹中的视频。我有个问题。我能够获得标题，导航栏，但我的视频会转到导航栏的底部，实际上它应该会出现在导航栏中。

下面是代码，您可以告诉我需要对导航栏右侧显示的视频进行更改。

我的html代码

<!DOCTYPE HTML>
<html lang = "en">
  <head>
  <title>Videos</title>
      <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="videos.css">
  </head>


<body>
   <header>
  <nav>
  <h1> Main logo </h1>
   <ul id="nav"> 
    <li><a class="homeblack" href="index.html">Home</a></li>
    <li><a class="homered" href="videos.html">Videos</a></li>

 </ul>
 </nav>
 </header>
 <div class="divider"></div>
 <div>

<ul>
 <li><a href="#">education videos </a></li>
 <li><a href="#">film videos</a></li>
 <li><a href="#">other videos </a></li>
</ul>
 <div id="content"> Contents
<video controls width="250" height="160"> 
<source src="videoplayback.mp4" />
</video> 
<!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/mLe1pZ7w0v0" frameborder="0" allowfullscreen></iframe> -->
</div>
</div>






    <!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


  </body>
</html>

我的css代码

* {
 padding:0px;
 margin:0px;
}


body{
  margin: 0;
 }

header {
  background: green;
  color: white;
  padding: 8px 0px 6px 40px;
  height: 50px;
}

header h1 {
 display: inline;
 font-family: 'Oswald',sans-serif;
 font-weight: 400;
 font-size: 32px;
 float: left;
 margin-top: 0px;
 margin-right: 10px;
}

nav ul{
  display: inline;
 padding: 0px;
float: left;
}

nav ul li{
 display: inline-block;
 list-style-type:none;
 color: white;
 float: left;
 margin-left: 15px;
}

nav ul li a{
 color: white;
 text-decoration: none;
}

#nav {
 font-family: 'Montserrat', sans-serif;
}

.homered{
 background-color: red;
 padding: 30px 10px 25px 10px;

}

.divider{
 background-color: red;
 height: 5px;

}

.homeblack:hover{
 background-color: blue;
 padding: 30px 10px 25px 10px;
}
div{
 width:250px;
 height:666px;
 background:#1A8DA9;
}
div a{
 text-decoration:none;
 color:white;
 padding:20px;
 padding-right:100px
}
div ul li{
 list-style-type:none;
 display:block;
 padding :15px;

 border-bottom:1px solid #236D7F;
 }
 div ul li :hover{
  background:#4097AD;
  transition:linear all 0.40s;
  margin-left:10px;
 }
 div ul li a:hover{
  color:black;
 }

#content{
    display: inline-block;
    width: 100%;
    height: 50%;
    margin-left: 165px;
    position: 5px;
    float: right ;

 }

Answer 1

你需要使用float：left值将导航栏包装在容器中，同时视频必须用float：left包装在容器中。例如，在js小提琴上查看here。

     <body>
     <header>
    <nav>
    <h1> Main logo </h1>
   <ul id="nav"> 
    <li><a class="homeblack" href="index.html">Home</a></li>
    <li><a class="homered" href="videos.html">Videos</a></li>
 </ul>
 </nav>
 </header>
 <div class="divider"></div>
 <div id="navBar">

<ul>
 <li><a href="#">education videos </a></li>
 <li><a href="#">film videos</a></li>
 <li><a href="#">other videos </a></li>
</ul>
 <div id="content"> Contents

<!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/mLe1pZ7w0v0" frameborder="0" allowfullscreen></iframe> -->
</div>
</div>
 <video controls width="250" height="160"> 
<source src="videoplayback.mp4" />
</video> 






    <!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


    </body>
  </html>
* {
 padding:0px;
 margin:0px;
}


body{
  margin: 0;
 }

header {
  background: green;
  color: white;
  padding: 8px 0px 6px 40px;
  height: 50px;
}

header h1 {
 display: inline;
 font-family: 'Oswald',sans-serif;
 font-weight: 400;
 font-size: 32px;
 float: left;
 margin-top: 0px;
 margin-right: 10px;
}

nav ul{
  display: inline;
 padding: 0px;
float: left;
}

nav ul li{
 display: inline-block;
 list-style-type:none;
 color: white;
 float: left;
 margin-left: 15px;
}

nav ul li a{
 color: white;
 text-decoration: none;
}

#nav {
 font-family: 'Montserrat', sans-serif;
}

.homered{
 background-color: red;
 padding: 30px 10px 25px 10px;

}

.divider{
 background-color: red;
 height: 5px;

}

.homeblack:hover{
 background-color: blue;
 padding: 30px 10px 25px 10px;
}
div{
 width:250px;
 height:666px;
 background:#1A8DA9;
}
div a{
 text-decoration:none;
 color:white;
 padding:20px;
 padding-right:100px
}
div ul li{
 list-style-type:none;
 display:block;
 padding :15px;

 border-bottom:1px solid #236D7F;
 }
 div ul li :hover{
  background:#4097AD;
  transition:linear all 0.40s;
  margin-left:10px;
 }
 div ul li a:hover{
  color:black;
 }

#content{
    display: inline-block;
    width: 100%;
    height: 50%;
    margin-left: 165px;
    position: 5px;
    float: right ;

 }
 #navBar {
   float: left;
 }
 video {
   float: left;
 }

视频位于页面右侧

1 个答案: