視頻在頁面的右側

-1

我正在學習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 ; 

}

來源

2017-06-04 Hara

這與javascript無關.. –

您需要使用float來包裝你的導航欄在容器：左值，也視頻必須被包裹在容器使用float：剩下。例如在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; 
}

來源

2017-06-04 11:28:58

我能夠得到我的側導航欄視頻權利正是我想要的。我還有一件事要檢查我已經放了一些5個視頻，我看到所有的重疊在彼此之上如何像列表一樣一個一個排列。我必須使用li元素還是其他任何東西。 – Hara

視頻在頁面的右側

回答

相關問題