Question

标题说明了一切，我的svg logo div和iframe正在推动我网页右侧的导航。我不明白为什么会这样做，所以我在这里看看能否找到一些指导。一如往常所有的帮助表示赞赏。

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

Answer 1

您遇到的问题是因为您的iframe占据了整行，因此菜单会被按下。

你可以添加这个CSS #logo {display:inline-block;}来使iframe像内联元素一样（所以一切都可以在同一行共存，就像你正在阅读的这些单词一样）。然后，您所要做的就是确保您的nav元素足够窄以适合页面（否则它将被推下，因为没有足够的空间）。这个demo应该更好地解释它。

另外值得注意的是，你可以拥有一个没有iframe的SVG。看看我正在开发的这个网站（http://yamichi.me/tour.php），页面中的徽标是一个SVG标记，它不在iframe中。这个page提供了有关使用SVG的更多信息。

对于小图片，我建议使用PNG，因为它不会影响加载时间，并且在浏览器中有更好的支持。

为什么我的logo div中的svg将我的导航从我的标题中推出

1 个答案: