标题说明了一切，我的带有 iframe 的 svg Logo div 将我的导航向下推到我网页的右侧。我不明白为什么要这样做，所以我来这里是想看看是否可以找到一些指导。一如既往，感谢所有帮助。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/normalize.css"/>
<title></title>
</head>
<body>
<Header>
<div id="logo"><iframe src="img/logo/caseywoelfle.com.svg" width="150" height="76" frameborder="none"></iframe></div>
<nav>
<ul>
<li><a href="index.html">home</a></li>
<li><a href="about.html">about me</a></li>
<li><a href="portfolio.html">portfolio</a></li>
<li><a href="blog.html">blog</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</nav>
</Header>
<div id="homepage">
<div id="banner-h">
<p id="bht">
</p>
</div>
</div>
<footer>
<span id="fom">
<h1>find out more about me</h1>
</span>
</footer>
</body>
</html>
body {
width: 100%;
background: #444444; }
/*Header styles*/
header {
width: 100%;
height: 77px;
background: #ffffff; }
header nav {
height: 100%;
vertical-align: middle;
float: right;
margin-right: 60px; }
header nav #logo {
width: 150px;
margin-left: 60px;
float: left; }
header nav ul {
list-style-type: none;
margin: 0;
padding: 0; }
header nav li {
height: 100%;
line-height: 77px;
display: inline-block;
margin-left: 55px; }
header nav a {
color: #000000;
text-decoration: none;
text-transform: uppercase; }
/*Homepage Styles*/
#homepage {
width: 100%;
background: #444444; }
#homepage #banner-h {
margin-top: 56px;
height: 751px;
background: #ffffff; }
#homepage #banner-h #bht {
height: 88px;
margin: auto;
color: #000000; }
footer {
margin-top: 56px;
background: #ffffff;
width: 100%;
height: 166px; }
footer #fom {
height: 90%;
text-align: center;
display: table;
width: 100%; }
footer h1 {
display: table-cell;
vertical-align: middle; }
/*# sourceMappingURL=style.css.map */
最佳答案
您遇到的问题是因为您的 iframe 占据了整行，所以菜单被下推。
您可以添加这段 CSS #logo {display:inline-block;} 使 iframe 像一个内联元素一样运行(因此所有内容都可以共存于同一行，很像你正在阅读的这些词)。然后你所要做的就是确保你的 nav 元素足够窄以适合页面(否则它会因为没有足够的空间而被向下推)。这demo应该更好地解释它。
另请注意，您可以拥有不带 iframe 的 SVG。看看我正在开发的这个网站 ( http://yamichi.me/tour.php )，页面中的 Logo 是一个 SVG 标签，它不在 iframe 中。这page有更多关于使用 SVG 的信息。
对于小图像，我建议改用 PNG，因为它不会对加载时间产生太大影响，并且在浏览器中有更好的支持。
关于html - 为什么我的 Logo div 中的 svg 将我的导航从我的标题中推出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26520929/