我目前正在为一个网站制作菜单，但遇到了一个问题:我有一个 Logo 应该在左侧，而菜单按钮应该在右侧。这是我到目前为止得到的:
<!DOCTYPE HTML>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Share:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title>Menu</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: 'Share', cursive;
}
#header {
background-color: ;
}
#header_logo {
width: ;
margin-top: ;
}
#header_menu {
width: 100%;
}
.menubutton {
height: 2.5em;
line-height: 2.5em;
display: inline-block;
background-color: ;
margin-left: 20px;
}
a {
font-family: 'Share', cursive;
}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
</style>
</head>
<body>
<div id="wrapper" align=""> <!-- Beginning of wrapper -->
<div id="header"> <!-- Beginning of Header -->
<div id="header_logo" align="left">
<img src="http://futurized.t15.org/fut_logo.png" style="height: 12px; z-index: 2;"/>
</div>
<div id="header_menu" align="right">
<div class="menubutton">
<a href="">Home</a>
</div>
<div class="menubutton">
<a href="">Info</a>
</div>
<div class="menubutton">
<a href="">Werben</a>
</div>
<div class="menubutton" align="right" style="margin-right: 20px;">
<a href="">Kontakt & Impressum</a>
</div>
</div>
</div> <!-- End of header -->
</div> <!-- End of wrapper -->
</body>
</html>
问题是 Logo 与菜单按钮不在一条线上…… 在我添加 Logo 之前，一切都很完美。我尝试了不同的方法，但没有任何效果。你们知道我该如何解决这个问题吗？
最佳答案
将 float:left 添加到您的 #header_logo div。
请注意，如果您希望间距更小，您可能还需要减少或消除 .menubutton 类中的 line-height 属性。
关于html - 我怎样才能在同一行上获得两个div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18836018/