我正在尝试将我的实时推特内容放在我的YouTube视频旁边，我希望它们在同一行，但不知道要实现哪些代码以便这样做。
另外，我想在我的代码中使用另一个字体系列，我在哪里可以找到它们，如何在代码中实现它？
下面我为我的网页提供了html，css和js，如果可以请修复错误谢谢。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Muhammed's Webpage</title>
<link rel="stylesheet" type="text/css" href="homepage.css">
<script src="homepage.js"></script>
<link href='https://fonts.googleapis.com/css?family=Raleway:700|Arya:400,700|Nunito:700' rel='stylesheet' type='text/css'>
</head>
<body><img src="https://www.facebookbrand.com/img/fb-art.jpg" height=85px>
<div id="page">
<div id="navbar">
<ul>
<li><a href="#BasicInfo"> BASIC INFORMATION </a></li>
<li><a href="#Curriculum Vitae"> CURRICULUM VITAE </a></li>
<li><a href="#Portfolio"> PORTFOLIO </a></li>
<li><a href="#Report"> REPORT </a></li>
</ul>
</div>
<div class="yt">
<iframe height="400" width="700" src="http://www.youtube.com/embed/nKIu9yen5nc">
</iframe>
</div>
<div id = "twitter">
<a class="twitter-timeline" href="https://twitter.com/applenws" data-widget-id="674678491141570560">Tweets by @applenws</a>
</div>
<div class="content" id="Basic Information">
<h3 class="contentbox"> <u>Basic Information</u> </h3>
<p>In this section i will have some information about myself.
<br> For my finished website i'd like to make it responsive, so that it alters and readjusts well to different screen sizes. I'd also like to include a gallery that uses javascript as i haven't used any javascript on this site yet.
<br>
<br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
</div>
<div class="content" id="Curriculum Vitae">
<h3 class="contentbox"> <u>Curriculum Vitae</u> </h3>
<p>
Here i will have my twitter, instagram and facebook feed
<br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo
</div>
<div class="content" id="Portfolio">
<h3 class="contentbox"> <u>Portfolio</u> </h3>
<p>
Here i will showcase some of my current projects and completed projects.
<br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim.
</p>
</div>
<div class="content" id="Report">
<h3 class="contentbox"> <u>Report</u> </h3>
<p>
Here i will showcase some of my current projects and completed projects.
<br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat
</div>
<br>
<br>
</body>
</html>
#page {
margin: auto;
max-width: 85%;
font-family: 'Arya', sans-serif;
color: white;
padding-top: 50px;
}
#navbar {
position: fixed;
top: 0;
width: 100%;
margin-left: 11%;
opacity: 0.8;
max-width: 85%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
position: fixed;
}
li {
float: left;
border-right: 2px solid black;
}
li:first-child {
border-left: 2px solid black;
}
li a {
display: inline-block;
color: black;
text-align: justify;
padding: 36px 40px;
text-decoration: underline;
font-family: 'Raleway', sans-serif;
}
li a:hover {
background-color: #5c5c5c;
color: white;
}
div.yt {
margin-left: 0px;
margin-top: 0px;
}
#twitter {}
.contentbox {
font-family: 'Arya', sans-serif;
font-weight: 700;
font-size: 2em;
padding-left: 10px;
padding-bottom: 0;
margin-bottom: 0;
background-color: grey;
}
.content {
background-color: grey;
}
p {
text-indent: 3%;
margin: auto;
max-width: 95%;
}
h3 {
margin-left: 5px;
max-width: 95%;
}
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}
}(document,"script","twitter-wjs");
答案 0 :(得分：2)
至于将视频和Twitter Feed放在同一行，请将您的CSS切换为：
#page {
margin: auto;
max-width: 85%;
font-family: 'Arya', sans-serif;
color: white;
padding-top: 50px;
}
#navbar {
position: fixed;
top: 0;
width: 100%;
margin-left: 11%;
opacity: 0.8;
max-width: 85%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
position: fixed;
}
li {
float: left;
border-right: 2px solid black;
}
li:first-child {
border-left: 2px solid black;
}
li a {
display: inline-block;
color: black;
text-align: justify;
padding: 36px 40px;
text-decoration: underline;
font-family: 'Raleway', sans-serif;
}
li a:hover {
background-color: #5c5c5c;
color: white;
}
div.yt {
margin-left: 0px;
margin-top: 0px;
display:inline-block;
}
#twitter {
display:inline-block;
}
.contentbox {
font-family: 'Arya', sans-serif;
font-weight: 700;
font-size: 2em;
padding-left: 10px;
padding-bottom: 0;
margin-bottom: 0;
background-color: grey;
}
.content {
background-color: grey;
}
p {
text-indent: 3%;
margin: auto;
max-width: 95%;
}
h3 {
margin-left: 5px;
max-width: 95%;
}
重要的部分是youtube div和twitter div现在都使用样式'display：inline-block'。您可能还想调整Twitter Feed的高度以匹配YouTube视频的高度。要为您的网页添加其他字体，我建议您使用https://www.google.com/fonts。选择您喜欢的字体，将其添加到您的收藏中，点击右下角的使用，然后复制代码。